I’m having trouble with my Flask app after adding caching. The frontend is throwing a CORS error when I try to fetch data from the backend. Here’s what I’ve got:
My Flask route uses @cache.cached(timeout=20) and handles GET requests for subject and chapter data. It’s working fine on its own.
In my Vue 3 frontend, I’m trying to fetch this data like this:
async getSubjects() {
try {
const response = await fetch('http://localhost:5000/get_subject', {
method: 'GET',
headers: {
'Content-Type': 'application/json',
'Authorization': 'Bearer ' + localStorage.getItem('access_token')
}
});
// ... handle response
} catch (error) {
console.log(error);
}
}
But I’m getting a CORS error saying there’s no ‘Access-Control-Allow-Origin’ header. Any ideas on how to fix this? I’m not sure if it’s related to the caching or if I’m missing something else in my setup. Thanks!
hey there, i’ve run into similar issues before. have u tried adding the ‘Access-Control-Allow-Origin’ header to ur Flask responses? Something like this:
@app.after_request
def add_cors_headers(response):
response.headers[‘Access-Control-Allow-Origin’] = ‘*’
return response
this might help bypass the CORS error. lmk if it works!
This issue might not be directly related to caching, but rather to how CORS is configured in your Flask app. Ensure you’ve properly set up CORS on the backend. You can use the Flask-CORS extension to handle this easily. Add it to your Flask app like this:
from flask_cors import CORS
app = Flask(name)
CORS(app)
This will enable CORS for all routes. If you need more granular control, you can specify which routes should allow CORS. Also, double-check that your server is actually running on localhost:5000 and that the frontend is making requests to the correct URL. If the issue persists, try clearing your browser cache or using a different browser to rule out any client-side caching problems.