What Is CORS and How Does It Work?

The Same-Origin Policy

Browsers enforce a same-origin policy that prevents JavaScript on one origin from reading responses from a different origin. An origin is defined as the combination of scheme + hostname + port.

https://app.example.com and https://api.example.com are different origins (different subdomains), so an AJAX call from the first to the second is blocked by default.

This policy prevents a malicious website from using your authenticated session to silently make requests to your bank, email or social accounts.

What CORS Does

CORS is a mechanism that lets servers opt in to allowing cross-origin requests. The server adds headers to its responses that tell the browser which origins, methods and headers are allowed.

Simple Requests vs Preflight

Simple requests (GET/POST with only safe headers) are sent directly. The browser checks the response's Access-Control-Allow-Origin header.

Preflighted requests (any request with custom headers, methods like PUT/DELETE, or Content-Type other than the three safe types) first trigger an OPTIONS request — the preflight. The server must respond to the preflight with appropriate CORS headers before the browser sends the actual request.

The Key CORS Headers

Common Misconfigurations

Wildcard with credentials

Access-Control-Allow-Origin: * combined with Access-Control-Allow-Credentials: true is invalid — browsers reject this combination. You must specify the exact origin when allowing credentials.

Reflecting any origin

Some servers read the Origin request header and echo it back as Access-Control-Allow-Origin. This effectively bypasses CORS for every origin and should be done with great caution — only if you intentionally want a public API.

Trusting null origin

Origin: null is sent by sandboxed iframes and local files. Allowing null as a trusted origin can be exploited.

Check your API's CORS configuration with our CORS Header Checker.