CORS Policy
A security configuration on a server that dictates which origins are allowed to access its resources via a browser.
Detailed Explanation
CORS (Cross-Origin Resource Sharing) is the solution to the Same-Origin Policy. Without it, your browser would block a script on `site-a.com` from fetching data from `api-b.com`. The server at `api-b.com` must explicitly include headers like `Access-Control-Allow-Origin` to grant permission. Understanding CORS is essential for debugging 'Network Error' issues in frontend development.
Quick Summary
CORS is a browser security mechanism that lets a server opt in to allowing scripts from other origins to read its responses. It is enforced only by browsers, server-to-server requests are not affected, but it's the source of most cross-origin headaches in web dev.
Key Takeaways
- An origin is the (scheme, host, port) triple, https://app.example.com and https://api.example.com are different origins.
- The browser auto-classifies requests as "simple" (sent directly) or "preflighted" (OPTIONS first); custom headers, non-standard methods, or credentials trigger a preflight.
- Access-Control-Allow-Origin: * cannot be combined with credentials, you must echo the specific origin and add Access-Control-Allow-Credentials: true.
- CORS errors are surfaced in the browser console, not in fetch/XHR error callbacks, the JS sees a generic network error.
- CORS is not authentication or authorization; it does not protect a server from attackers, only browsers from leaking responses cross-origin.
When to use it
- Exposing a public API consumed by SPAs hosted on third-party domains.
- Allowing a frontend on app.example.com to call an API at api.example.com.
- Permitting browser-based file uploads to S3, GCS, or other object storage.
- Embeddable widgets where the host site needs to fetch data from the widget's backend.
Common Mistakes
- Trying to fix a CORS error in the frontend code, the fix almost always lives on the server.
- Setting Access-Control-Allow-Origin: * on an authenticated API, which the browser silently rejects when credentials are involved.
- Forgetting to handle the OPTIONS preflight method, returning 404 or 405 and breaking the actual request.
- Assuming CORS protects the API, anyone with curl can hit it; CORS only restricts what scripts in a victim's browser can read.
CORS Policy, Frequently Asked
Why does my GET request work in Postman but fail in the browser?
Postman is not a browser and does not enforce CORS. The browser checks the response headers and blocks JavaScript from reading the body unless the server returned the right Access-Control-Allow-* headers.
How do I fix a CORS error?
Add Access-Control-Allow-Origin (and any other Allow-* headers your request needs) to the server's response, and make sure OPTIONS requests are handled. If you don't control the server, route the call through your own backend as a proxy.
Does CORS apply to images and CSS?
Loading them is allowed cross-origin without CORS, but reading their content from JavaScript (canvas pixel data, computed styles from a cross-origin stylesheet) requires the server to send CORS headers and the request to set crossorigin="anonymous".