Web Fundamentals

CORS Preflight in Practice: Credentials, Simple Requests & Misconfigurations

mediumWeb Fundamentals

CORS Preflight in Practice: Credentials, Simple Requests & Misconfigurations

Learn the interview-ready mental model, practical trade-offs, and production patterns for this web fundamentals topic.

Topic content

TL;DRPreflight = OPTIONS request before non-simple cross-origin calls. Credentials require specific origin + Access-Control-Allow-Credentials: true (no wildcard).
High Signal
Google
Meta
Netflix
Agoda
Atlassian
30-Second Answerstart every interview with this

CORS preflight requests are sent by the browser for non-simple cross-origin requests (PUT, DELETE, custom headers, application/json). Understanding when preflight happens, how credentials affect behavior, and common server misconfigurations is essential for debugging cross-origin issues.

The browser acts like a security guard. Before allowing a complex request (non-simple), it first asks the server: 'Is this origin, method, and these headers allowed?' If the server says yes, the real request proceeds. Credentialed requests make the rules stricter.

1Simple vs Preflight Requests

Simple requests (GET, HEAD, POST with basic Content-Type and no custom headers) are sent directly. Non-simple requests trigger a preflight OPTIONS request first.

Simple Request Flow:
Browser → Actual Request (GET/POST simple)
Server → Response with CORS headers
Browser → Allows JS to read response
Preflight Request Flow:
Browser → OPTIONS Request
Server → Access-Control-Allow-* Headers
Browser validates → Sends Actual Request

2Credentialed CORS Requests

When credentials: 'include' is used, the server must return a specific origin (no wildcard *) and Access-Control-Allow-Credentials: true.

3Common CORS Misconfigurations

Missing headers on actual response (not just preflight), using wildcard with credentials, incorrect Access-Control-Allow-Headers, and proxy/CDN stripping headers.

Key Takeaways
  • ✓Preflight happens for non-simple requests (custom methods/headers)
  • ✓Credentialed requests require specific origin + Allow-Credentials: true
  • ✓Wildcard (*) cannot be used with credentials
  • ✓Check both preflight and actual response headers
  • ✓Proxies/CDNs can strip CORS headers — verify the full chain
  • ✓Always test cross-origin flows in real browsers