CORS
What is it?
CORS is a browser security feature that controls whether a web page can make requests to a different domain than the one it came from.
Explain like I'm 5
Why was it created?
Browsers block cross-site requests by default to protect users. CORS was created to let servers safely opt in to sharing with specific other origins.
Where is it used?
- Front-end apps calling APIs on other domains
- Public APIs allowing browser access
- Single-page apps with separate API hosts
- Embedding third-party resources
Why should developers care?
CORS errors are one of the most common frustrations in front-end development, so understanding it saves real debugging time.
How does it work?
When a page requests another origin, the browser checks the response for CORS headers like Access-Control-Allow-Origin. For some requests it first sends a 'preflight' OPTIONS request to ask permission. If the headers don't allow it, the browser blocks the response.
Real-world example
A site at app.example.com calls api.other.com; the API must return a header allowing app.example.com, or the browser blocks the response with a CORS error.
Common use cases
- Allowing trusted front-ends to use an API
- Public read-only APIs
- Separating app and API domains
- Controlling cross-origin access
Advantages
- Protects users from malicious cross-site requests
- Lets servers allow specific origins
- Standard and built into browsers
- Granular control via headers
Disadvantages
- Confusing error messages
- Preflight requests add overhead
- Easy to misconfigure (too open or too strict)
When should you use it?
Whenever a browser-based app must call an API on a different origin.
When should you avoid it?
It's not optional in the browser; server-to-server calls aren't subject to CORS at all.
Alternatives
Related terms
Interview questions
Beginner
- What does CORS stand for?
- What problem does it address?
Intermediate
- What is a preflight request?
- Which header allows an origin?
Senior
- Why is a wildcard allow-origin risky with credentials?
- How does CORS relate to the same-origin policy?
Common misconceptions
- "CORS is a server-side security wall" — it's enforced by the browser; it doesn't protect your server from non-browser clients.
- "A CORS error means the server rejected the request" — often the server responded, but the browser blocked it for missing headers.
Fun facts
- CORS stands for Cross-Origin Resource Sharing.
- It relaxes the browser's stricter same-origin policy in controlled ways.
Timeline
- 2014 — CORS standardized as a W3C recommendation
Learning resources
Quick summary
CORS is a browser mechanism that lets servers control which other origins may read their responses, relaxing the same-origin policy safely.
Cheat sheet
- Cross-Origin Resource Sharing
- Browser-enforced
- Server sends allow-origin headers
- Preflight for certain requests