How CORS Works
IntermediateCORS (Cross-Origin Resource Sharing) is a browser mechanism that controls whether a web page on one origin may make requests to a different origin. By default, the same-origin policy blocks such cross-origin requests to protect users. CORS lets a server opt in by sending specific Access-Control headers that tell the browser which origins, methods, and headers are allowed. It is enforced by the browser, not the server — which is why a CORS error means the browser blocked the response, not that the request failed.
Think of a guest list at a private club
By default, a club (your API) only serves its own members from the same building (same origin). When someone from another building (a different origin) tries to enter, the doorman (the browser) checks a guest list the club provides (the Access-Control-Allow-Origin header). If that origin is on the list, entry is allowed; if not, the doorman turns them away. The club decides who is welcome by publishing the list — but it is the doorman who enforces it.
Step by Step
Key Concepts
Same-Origin Policy
The browser default rule that a page can only read responses from the same origin (scheme, host, and port). CORS is the controlled way to relax it for specific cross-origin cases.
Preflight Request
An automatic OPTIONS request the browser sends before a non-simple cross-origin request, asking the server which methods and headers are permitted. The real request proceeds only if the server approves.
Access-Control Headers
Server response headers that grant cross-origin access — Access-Control-Allow-Origin, -Methods, -Headers, and -Credentials. They tell the browser what the page is allowed to do.
Browser-Enforced
CORS is enforced by the browser, not the server. A CORS error means the browser blocked the script from reading the response; the server may still have processed the request.
Key Facts
- CORS is a browser security feature — it does not protect the server; server-side authorization is still required. It controls what a browser page may read cross-origin.
- A CORS error means the browser blocked access due to missing/incorrect Access-Control headers, not that the network request itself failed.
- You cannot use a wildcard origin (*) together with credentials; the server must echo the specific requesting origin when cookies or auth are involved.
Real-World Applications
A frontend calling a separate API
A single-page app hosted at app.example.com calling api.example.com is cross-origin, so the API must return Access-Control-Allow-Origin for the app origin, or the browser blocks the responses.
Public API for third-party sites
A public API that many websites embed sets permissive CORS headers so browsers on those sites can read its responses — carefully avoiding credentialed wildcards to prevent leaking user data.
Frequently Asked Questions
What is CORS and why does it exist?
CORS (Cross-Origin Resource Sharing) is a browser mechanism that controls whether a web page from one origin can read responses from a different origin. It exists because browsers enforce the same-origin policy by default to protect users — without it, a malicious site could read data from another site where you are logged in. CORS lets a server explicitly opt in to sharing its resources with specific origins by sending Access-Control headers.
What is a CORS preflight request?
A preflight is an automatic OPTIONS request the browser sends before certain cross-origin requests — those using methods like PUT or DELETE, or custom headers. It asks the server which origins, methods, and headers are allowed. The server responds with Access-Control headers, and only if they permit the actual request does the browser then send it. Preflights protect servers from unexpected cross-origin requests with side effects.
Why am I getting a CORS error?
A CORS error means the browser blocked your page from reading a cross-origin response because the server did not return the correct Access-Control headers — most commonly a missing or mismatched Access-Control-Allow-Origin. Importantly, the server may have actually processed the request; the browser simply refuses to expose the response to your script. The fix is to configure the server to include the appropriate CORS headers for your origin, methods, and headers.
Does CORS protect my server?
No. CORS is enforced by the browser and only governs what browser-based scripts may read across origins. It does not protect your server from requests made by non-browser clients (like curl or another server), which ignore CORS entirely. Your server still needs its own authentication and authorization. CORS is about browser data-sharing rules, not server-side access control.