CORS
Cross-Origin Resource Sharing
- Pronunciation
- KORZ
In short
CORS is a browser security mechanism that lets a server declare which other websites may read its responses when they make requests from JavaScript.
What is CORS?
Browsers enforce the same-origin policy: JavaScript running on one origin, meaning a specific combination of scheme, domain, and port like https://app.example.com, cannot read responses from a different origin by default. CORS is the standard way for a server to relax that rule safely, by sending HTTP headers that say which origins are allowed.
When a page calls fetch() on another origin, the browser adds an Origin header to the request. If the response includes a matching Access-Control-Allow-Origin header, the browser hands the data to the script; otherwise it blocks the response and logs a CORS error. For requests that could change data, such as those using PUT, DELETE, or custom headers, the browser first sends an OPTIONS preflight request to ask permission.
Think of CORS as a guest list written by the server and checked by the browser acting as the bouncer. The key detail is that the browser enforces it, not the server: tools like curl and other servers ignore CORS entirely, which is why a request can work in a terminal but fail in the browser.
A common mistake is treating CORS as protection for an API. CORS does not stop anyone from sending requests; it only controls which web pages can read the responses in a browser, so real protection still requires authentication and authorization. Allowing every origin with * on private APIs is risky, and browsers refuse to combine * with credentials such as cookies.
At a glance
Key takeaways
- Browsers block cross-origin reads by default under the same-origin policy.
- CORS headers from the server tell the browser which origins are allowed.
- Preflight
OPTIONSrequests check permission before certain requests. - CORS is enforced by browsers, not by servers or command-line tools.
- CORS errors are fixed on the server, not in front-end code.
Example
app.use((req, res, next) => {
// Only this front end may read responses in the browser
res.setHeader("Access-Control-Allow-Origin", "https://app.example.com");
res.setHeader("Access-Control-Allow-Methods", "GET, POST, PUT, DELETE");
res.setHeader("Access-Control-Allow-Headers", "Content-Type, Authorization");
// Answer preflight requests without running the route
if (req.method === "OPTIONS") return res.sendStatus(204);
next();
});Readers ask
How do I fix a CORS error?
Configure the server that owns the API to return an Access-Control-Allow-Origin header that includes your front end's origin, and to answer preflight OPTIONS requests. The error cannot be fixed from browser-side JavaScript alone, although a same-origin proxy is a common workaround during development.
Does CORS protect my API from attackers?
No. CORS only controls whether browsers let web pages read responses; attackers can still call your API directly with other tools. You still need authentication, authorization, and CSRF protection.
What is a preflight request?
A preflight is an automatic OPTIONS request the browser sends before certain cross-origin requests to check whether the server allows the method and headers. If the server does not approve, the real request is never sent.
See also
- HTTPWeb Development, p. 19HTTP is the protocol that browsers, apps, and servers use to exchange web pages and data through a simple cycle of requests and responses.
- APIBackend & APIs, p. 2An API is a set of rules that lets one piece of software request data or actions from another in a predictable, documented way.
- CSRFSecurity, p. 8CSRF is an attack that tricks a logged-in user's browser into sending an unwanted request to a trusted site, which treats it as a genuine user action.
- MiddlewareBackend & APIs, p. 30Middleware is software that sits between two layers of a system, most often code that runs between an incoming request and the final response in a web server.
- JavaScriptWeb Development, p. 24JavaScript is the programming language that runs in web browsers to make pages interactive, and it also runs on servers through runtimes like Node.js.
- CookieWeb Development, p. 6A cookie is a small piece of data a website asks the browser to store and send back with later requests, often used to keep users logged in.
- HTTP HeaderWeb Development, p. 20An HTTP header is a name-and-value line sent with an HTTP request or response, carrying details such as the content type, caching rules or credentials.
Sources
Spotted a mistake or something missing on this page?Suggest an edit