Web Fundamentals

CORS Preflight in Practice: Credentials, Simple Requests & Misconfigurations

Web Fundamentals Map

Rendering & Browser Architecture

Critical Rendering PathScript Loading Patterns (async/defer)Event Loop Deep DiveJavaScript Module Systems (CJS, ESM, UMD)Dynamic Module Loading (import())Import on InteractionImport on VisibilityBrowser Rendering Pipeline & Layout ThrashingRendering Strategies (CSR, SSR, SSG, ISR)Streaming SSR & Progressive HTMLIslands ArchitectureReact Server ComponentsFramework Reactivity (React, Vue, Svelte, Solid)HTTP/1.1 vs HTTP/2 vs HTTP/3 (QUIC)DNS Resolution & TTL Caching

Performance

Core Web Vitals: LCP, INP, CLSPerformance Optimization Trade-offsCritical Resource PrioritizationCode Splitting & Dynamic ImportsTree Shaking & Dead Code EliminationLazy LoadingResource Hints: Preload, Prefetch & PreconnectText Compression: Gzip & BrotliImage & Video OptimizationAdaptive LoadingList VirtualizationWeb Workers vs Main ThreadMemory Leaks: Detection & PreventionManaging Third-Party ScriptsHow CDNs WorkHTTP Caching Deep DiveService Workers & Offline StrategyPWA Fundamentals

Security

Cross-Site Scripting (XSS)Cross-Site Request Forgery (CSRF)CORS ExplainedCORS Preflight, Credentials & MisconfigurationsContent Security Policy (CSP)Why is HTTPS Secure? (TLS/SSL)Authorization Best PracticesCookie Security & Session Hardening

State & Data Architecture

State Management Guide (Context vs Zustand vs Redux)React Query & Server State CachingData Fetching PatternsCaching StrategiesPagination: Offset vs Cursor-BasedReal-time Communication (WebSocket, SSE, Polling)
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
PreviousNext

Topic Guide

On this page