Cross-Origin Resource Sharing (CORS)
Cross-Origin Resource Sharing, or CORS, is a browser security mechanism that controls whether scripts running on one web origin may read resources from another origin.
It commonly appears when frontend websites call external APIs directly from a browser.
What It Means in Practice
Suppose a website runs at:
https://example.com
and its JavaScript tries to request:
https://api.example-service.com
Those are different origins.
Browsers apply the same-origin policy and require the API to explicitly permit the cross-origin request when appropriate.
MDN's CORS guide explains how browsers use HTTP headers to control cross-origin requests.
How It Works
The server can return headers such as:
Access-Control-Allow-Origin
to describe which origins may access the response.
Some requests may also trigger a browser preflight request before the actual API request is sent.
CORS is enforced primarily by browsers.
It is not a general authentication system for server-to-server APIs.
CORS vs. Authentication
CORS answers:
Is browser code from this origin allowed to access this response?
Authentication answers:
Who is making the request?
Authorization answers:
What are they allowed to do?
These mechanisms solve different problems.
A CORS configuration does not replace Authentication.
Why It Matters
CORS errors commonly appear during:
- Headless CMS development
- Frontend API integrations
- JavaScript applications
- External data requests
- Custom dashboards
The browser may block access even though opening the API URL manually appears to work.
Common Problems
Common problems include:
- Allowing every origin unnecessarily
- Treating CORS as API authentication
- Configuring CORS only in frontend code
- Credentials combined with overly broad origin rules
- Development origins working while production does not
- Misreading a browser CORS error as an API outage
MDN's security guidance recommends allowing only the origins and resources required for the application rather than exposing credentialed resources broadly. MDN CORS security guidance
How to Improve
Configure CORS at the server or API layer according to which browser origins genuinely require access.
Keep Authentication and Authorization controls separate.
When a browser request fails, inspect both the network response and CORS headers rather than changing frontend code blindly.