Fixing CORS Issues in a Flask-React App

Cross-Origin Resource Sharing (CORS) issues are a common headache when integrating a Flask backend with a React frontend. If you've encountered errors like: Access to fetch at 'http://localhost:5000/api/data' from origin 'http://localhost:3000' has been blocked by CORS policy. Then you’re not alone! In this post, I'll walk you through what CORS is, why this happens, and how to fix it. What is CORS? CORS is a security feature implemented by web browsers to prevent unauthorized access to resources from different origins. An "origin" consists of the protocol (http/https), domain, and port. If your React frontend (http://localhost:3000) tries to fetch data from a Flask backend (http://localhost:5000), the browser blocks the request unless the server explicitly allows it. How to Fix CORS Issues in Flask Install Flask-CORS Flask does not handle CORS by default. To enable it, install the flask-cors package: pip install flask-cors Enable CORS in Your Flask App Modify your Flask app to include CORS support: from flask import Flask, jsonify from flask_cors import CORS app = Flask(name) CORS(app) # Enables CORS for all routes @app.route("/api/data") def get_data(): return jsonify({"message": "CORS is now enabled!"}) if name == "main": app.run(debug=True) This allows requests from any origin. If you want to restrict access, specify allowed origins like this: CORS(app, origins=["http://localhost:3000"]) # Allow only requests from React frontend Enabling CORS for Specific Routes If you prefer more control, apply CORS to specific routes: from flask_cors import cross_origin @app.route("/api/data") @cross_origin(origin="http://localhost:3000") def get_data(): return jsonify({"message": "CORS applied to this route only"}) Handling CORS on the React Side Using Proxy in Development In your React project’s package.json, add: "proxy": "http://localhost:5000" This tells React to forward API requests to Flask without triggering CORS issues. Using Fetch with CORS Options If you’re making API calls manually, include CORS options: fetch("http://localhost:5000/api/data", { method: "GET", headers: { "Content-Type": "application/json", }, mode: "cors" }) .then(response => response.json()) .then(data => console.log(data)) .catch(error => console.error("Error:", error)); Conclusion CORS issues can be frustrating, but they are easy to fix with the right approach. By using Flask-CORS and configuring it correctly, you can ensure smooth communication between your Flask backend and React frontend. If you found this helpful, let me know in the comments or share your own experience with CORS.

Mar 10, 2025 - 03:50

Cross-Origin Resource Sharing (CORS) issues are a common headache when integrating a Flask backend with a React frontend. If you've encountered errors like:

Access to fetch at 'http://localhost:5000/api/data' from origin 'http://localhost:3000' has been blocked by CORS policy.

Then you’re not alone! In this post, I'll walk you through what CORS is, why this happens, and how to fix it.

What is CORS?

CORS is a security feature implemented by web browsers to prevent unauthorized access to resources from different origins. An "origin" consists of the protocol (http/https), domain, and port. If your React frontend (http://localhost:3000) tries to fetch data from a Flask backend (http://localhost:5000), the browser blocks the request unless the server explicitly allows it.

How to Fix CORS Issues in Flask

Install Flask-CORS

Flask does not handle CORS by default. To enable it, install the flask-cors package:

pip install flask-cors

Enable CORS in Your Flask App

Modify your Flask app to include CORS support:

from flask import Flask, jsonify
from flask_cors import CORS

app = Flask(name)
CORS(app) # Enables CORS for all routes

@app.route("/api/data")
def get_data():
return jsonify({"message": "CORS is now enabled!"})

if name == "main":
app.run(debug=True)

This allows requests from any origin. If you want to restrict access, specify allowed origins like this:

CORS(app, origins=["http://localhost:3000"]) # Allow only requests from React frontend

Enabling CORS for Specific Routes

If you prefer more control, apply CORS to specific routes:

from flask_cors import cross_origin

@app.route("/api/data")
@cross_origin(origin="http://localhost:3000")
def get_data():
return jsonify({"message": "CORS applied to this route only"})

Handling CORS on the React Side

Using Proxy in Development

In your React project’s package.json, add:

"proxy": "http://localhost:5000"

This tells React to forward API requests to Flask without triggering CORS issues.

Using Fetch with CORS Options

If you’re making API calls manually, include CORS options:

fetch("http://localhost:5000/api/data", {
method: "GET",
headers: {
"Content-Type": "application/json",
},
mode: "cors"
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error("Error:", error));

Conclusion

CORS issues can be frustrating, but they are easy to fix with the right approach. By using Flask-CORS and configuring it correctly, you can ensure smooth communication between your Flask backend and React frontend. If you found this helpful, let me know in the comments or share your own experience with CORS.