I have built a Flask App website and hosted it on Heroku. Now I’m trying to use React in order to build a more erm reactive front-end. I added API route in the Flask app that returns a JSON with some information.
@app.route("/api/", methods=["GET"])
def get_country_info():
*some procesing*
return jsonify(data)
When I test this with Postman I get the expected JSON, but when I try to fetch the data with react (local development server) I get:
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://values-chart-generator.herokuapp.com/api?social_value=religion_score&demo_group=education&country=germany. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing). Status code: 308.
I don’t understand where the problem is, react or flask, or how to fix the issue. Any help appreciated.
>Solution :
I am not a flask developer so I can’t give you code to fix it.
but your problem is due to same origin policy which is a browser security mechanism that prevents communication between different origins.
that’s why it works with postman and not with react
so your solution would be to add cors configurations to your flask app to allow frontend origin accessing your backend.
flask code could be found here How to enable CORS in flask
more about cors here