CORS explained simply
Intro
If you’re a developer, you must’ve already built many platforms that require API calls and one of the most common errors developers encounter is:
Access to fetch at '...' has been blocked by CORS policy
This message appears when the browser blocks a request due to CORS rules.
CORS stands for Cross-Origin Resource Sharing
Note: What is an Origin? An origin is made up of protocol + domain + port. That’s why localhost:3000 and localhost:5000 are considered different.
It enforces security between websites in such a way that other websites can’t steal your data by making unauthorized requests to your browser. To make it clearer, it is a browser security feature that controls whether one website can request resources from other websites or not.
What is this famous CORS error?
Let’s assume:
You (Frontend) want to talk to your friend (Backend)
But there’s a security guard (Browser) standing in between
Scenario
You say: “Hey Backend, can I get this data?”
Backend replies: “Sure.”
But the security guard asks: “Did the backend explicitly say you’re allowed to talk?”
If the backend doesn’t allow this origin, then the guard says: “Nope. I’m blocking you.”
Even though the backend responded.
Frontend (localhost:3000) → Request → Backend (localhost:5000)
To put it simply, this request is blocked unless the CORS permission is given
The Header That Controls CORS
CORS is mainly controlled through HTTP response headers sent by the backend.
When your frontend makes a request, the browser checks:
“Did the server explicitly allow this origin?”
To allow a request, the backend must include a header like this in its response:
Access-Control-Allow-Origin: <http://localhost:3000>
This tells the browser:
Requests coming from http://localhost:3000 are allowed.
What Happens If This Header Is Missing?
If the backend does not send this header, the browser assumes the request is unsafe and blocks it.
That’s when you see the famous error:
Blocked by CORS policy
Even though the backend might have responded correctly, the browser will not let the frontend access it.
How to Fix CORS Errors
Enable CORS on Backend (Node.js/Express)
import cors from "cors";
app.use(cors());
Or allow specific origin:
app.use(cors({origin:"<http://localhost:3000>"
}));
Fix CORS in Python Flask
from flask_cors import CORS
CORS(app)
Use a Proxy in Development
In React, add in package.json:
"proxy":"<http://localhost:5000>"
Proxy only works during development and does not solve CORS in production.
Don’t Disable CORS in Browser
Always fix it properly on the server.
Mistakes to look out for
Trying to fix CORS only from frontend
Forgetting correct backend headers
Using “ * “ in production
Not handling preflight OPTIONS requests
Conclusion
Wrap up simply:
CORS is a browser security feature
It prevents unsafe cross-origin requests
Backend must explicitly allow frontend origins
If the same request works in Postman or Curl but fails in the browser, that’s usually because CORS is enforced only by browsers. These errors are pretty common as most developers face this early on.
