Updated this quarter
Last updated:
If you have ever opened your browser console and seen \”Access to fetch at … has been blocked by CORS policy,\” you have hit one of the most common — and most misunderstood — errors in web development. It looks scary. It is usually a two-line fix. Here is what is actually happening and how to solve it, whether you are the frontend or backend developer.
## What CORS actually is
CORS stands for Cross-Origin Resource Sharing. Browsers block a webpage running on one origin — say, localhost:3000 — from making requests to a different origin — say, api.example.com — unless that second origin explicitly says it is okay. This is not a bug in your code. It is a security feature built into every browser, and it exists to stop malicious sites from quietly calling APIs on your behalf using your logged-in session.
## Step 1: confirm it is actually CORS
Open your browser dev tools, go to the Network tab, and click the failed request. If the response never left the server, or the server returned a 500 error, that is not CORS — that is a server bug wearing a CORS-shaped error message. True CORS errors show the request actually reaching the server and getting a response, but the browser refusing to hand that response to your JavaScript.
## Step 2: fix it on the server, not the client
This is the part beginners get backwards. You cannot fix a CORS error by changing frontend code — no header you add in fetch() will override a server that has not allowed your origin. The fix belongs on the server that is serving the API.
In Express, for example, that is as simple as installing the cors package and adding app.use(cors()) near the top of your server file. For a production app, you would lock that down to specific origins instead of allowing all of them — but for local development, that one line clears the error immediately.
## Step 3: watch for the preflight request
For anything beyond a simple GET request — a POST with a JSON body, for instance — the browser sends an automatic preflight OPTIONS request first, asking the server for permission before sending the real one. If your server does not respond correctly to OPTIONS requests, the real request never fires. Most frameworks CORS middleware handles this automatically, but if you are writing raw server code, this is the step people forget.
## Step 4: check credentials separately
If your request sends cookies or an Authorization header, you need two extra things: credentials: include on the frontend fetch call, and Access-Control-Allow-Credentials: true on the server — and in that case, the server cannot use a wildcard * for allowed origins. It has to name the exact origin. This combination trips up almost everyone the first time they add authentication to a project.
## The one-line summary
CORS errors are the server telling the browser \”I did not say this origin could talk to me.\” Fix it by telling the server to say yes — never by trying to trick the browser into ignoring the rule, which is not actually possible from JavaScript running in that browser anyway.
**Want to master web development fundamentals?** Join our Web Development course with hands-on labs, mock interviews, and placement support. Call +91 86109 64691.
