CORS + Preflight

NetworkingMidnetworking

The Question

What is CORS and how does the preflight request work?

What a Strong Answer Covers

• OPTIONS preflight
• "Access-Control-Allow-Origin
• "non-simple requests

Senior-Level Answer

CORS (Cross-Origin Resource Sharing) is a browser security mechanism that controls whether JavaScript running on one origin (scheme + host + port) can make HTTP requests to a different origin. Without CORS, the Same-Origin Policy would block all such requests entirely.

The browser enforces CORS — servers and network intermediaries cannot. When JavaScript calls `fetch('https://api.example.com/data')` from `https://app.example.com`, the browser checks whether the response includes `Access-Control-Allow-Origin: https://app.example.com` (or `*`). If not, the browser blocks the JavaScript from reading the response, even though the HTTP request was sent and the server responded normally.

**Simple vs. non-simple requests:** Simple requests (GET/HEAD/POST with only safe headers and `application/x-www-form-urlencoded`, `multipart/form-data`, or `text/plain` content types) skip the preflight. The browser sends the request directly with an `Origin` header and validates the response headers.

Non-simple requests — PUT, DELETE, PATCH, any request with custom headers (`Authorization`, `Content-Type: application/json`), or requests with credentials — trigger a **preflight**.

**Preflight request flow:** 1. Browser sends an `OPTIONS` request to the same URL with headers: - `Origin: https://app.example.com` - `Access-Control-Request-Method: POST` - `Access-Control-Request-Headers: Authorization, Content-Type` 2. Server responds (if it allows the request): - `Access-Control-Allow-Origin: https://app.example.com` - `Access-Control-Allow-Methods: POST, PUT, DELETE` - `Access-Control-Allow-Headers: Authorization, Content-Type` - `Access-Control-Max-Age: 86400` (cache preflight for 24h) 3. If the preflight succeeds, the browser sends the actual request. If it fails (missing or mismatched headers), the browser blocks the request without sending it.

**Credentials** (`withCredentials: true` / cookies): the server must respond with `Access-Control-Allow-Credentials: true` and must NOT use `Access-Control-Allow-Origin: *` — it must specify the exact origin.

Common production issues: forgetting to handle `OPTIONS` in server routing (returning 404 or 405), not including custom headers in `Access-Control-Allow-Headers`, or using a wildcard origin with credentials. `Access-Control-Max-Age` is often overlooked — without it, browsers send a preflight on every non-simple request, doubling latency.

What Separates a 2/3 from a 3/3

Common Mistakes

• Saying CORS is a server-side security feature — it is enforced by the browser; the server just indicates policy.
• Forgetting that simple requests skip the preflight but still require correct CORS response headers.
• Using Access-Control-Allow-Origin: * with Access-Control-Allow-Credentials: true — browsers reject this combination.
• Not returning CORS headers on error responses (4xx/5xx) — browsers block JavaScript from reading error details if CORS headers are missing even on errors.

Follow-Up Questions

• A CORS preflight succeeds but the actual request fails with a CORS error — what would you check? — Verify the actual request response also includes Access-Control-Allow-Origin; error responses (4xx) also need CORS headers.
• How does Access-Control-Max-Age affect API performance? — It caches preflight results in the browser; without it, every non-simple request triggers a preflight OPTIONS round trip, doubling latency for first requests.
• What is the difference between CORS and CSRF, and why don't they protect against the same attacks? — CORS controls cross-origin reads by JavaScript; CSRF exploits the browser automatically sending cookies on cross-origin form posts — CORS doesn't block form submissions by default.
• How would you configure CORS on an API gateway that serves multiple frontend origins? — Maintain a whitelist of allowed origins; dynamically echo the request Origin back in Allow-Origin if it matches the whitelist; never use wildcard for authenticated endpoints.

Related Questions

• TCP — 3-Way Handshake
• TLS — Certificate, DH, AES
• TCP vs UDP
• HTTP vs HTTPS
• WebSockets