CORS

CORS extends the browser's Same-Origin Policy, which blocks scripts from making requests to a different origin (protocol + domain + port). Servers opt in to cross-origin access by sending specific HTTP headers. CORS is enforced only by browsers — tools like Postman and server-to-server requests are unaffected.

Same-Origin Policy

• Two URLs have the same origin only if they share the same protocol, domain, and port. https://example.com and https://api.example.com are different origins (different subdomain). http://example.com and https://example.com are different origins (different protocol).
• Without CORS headers, the browser blocks the response from reaching JavaScript — the request may still reach the server, but the browser refuses to expose the response.

Simple Requests vs Preflight

• A "simple" request uses GET, HEAD, or POST with only CORS-safelisted headers and Content-Type of text/plain, multipart/form-data, or application/x-www-form-urlencoded. These go directly to the server without a preflight.
• Any other request — PUT, DELETE, PATCH, or requests with custom headers like Authorization or Content-Type: application/json — triggers a preflight. The browser automatically sends an OPTIONS request first to check if the server allows the actual request.
• The motivation: HTML forms could always make simple cross-origin POST requests, so servers were already expected to handle those. Preflight protects against newer request types that older servers may not expect.

Key CORS Headers

• Access-Control-Allow-Origin: The primary header. Set to a specific origin (https://example.com) or * (wildcard). With credentials: 'include', wildcard * is not allowed — you must specify the exact origin.
• Access-Control-Allow-Methods: Lists permitted HTTP methods (e.g., GET, POST, PUT, DELETE).
• Access-Control-Allow-Headers: Lists permitted request headers (e.g., Authorization, Content-Type).
• Access-Control-Max-Age: How long (in seconds) the browser can cache the preflight result, avoiding repeated OPTIONS requests.
• Access-Control-Allow-Credentials: Set to true to allow cookies and auth headers in cross-origin requests.

Common CORS Errors and Fixes

• "No Access-Control-Allow-Origin header present" — the server isn't sending CORS headers. Fix: add the header server-side.
• Preflight failure — the server doesn't handle OPTIONS requests or doesn't allow the method/headers used. Fix: configure the server to respond to OPTIONS with the correct Allow headers.
• Wildcard with credentials — using credentials: 'include' with Access-Control-Allow-Origin: * is invalid. Fix: set the header to the specific requesting origin.
• For third-party APIs you don't control, use a reverse proxy or backend relay — CORS headers must come from the server, not the client.

Debugging CORS

• CORS errors are intentionally opaque to JavaScript — fetch() rejects with a generic TypeError. Check the browser DevTools console and Network tab for the actual error details.
• The request often succeeds at the network level (the server processes it), but the browser blocks JavaScript from reading the response.

Key Interview Distinction: CORS is Server-Side You cannot fix CORS errors from the client. Adding headers to the fetch request does not help — the server must send the Access-Control-Allow-* response headers. This is the most common misconception candidates demonstrate in interviews.