Back
Web Fundamentals

CORS Preflight in Practice: Credentials, Simple Requests & Misconfigurations

Web Fundamentals
Build & Deployment: Monorepo, CI/CD, Strategies & Release SafetyState Management: Choosing the Right SolutionRedux: Predictable State Container (RTK + RTK Query)React Query (TanStack Query): Server State CachingData Fetching Patterns: REST, GraphQL, tRPC & Real-timeGraphQL Fundamentals for Frontend: Shape, Caching, and TradeoffsgRPC-Web Fundamentals: Browser Constraints and Proxy ModelCaching Strategies: Client, Server & EdgeData Normalization: Organizing State for PerformanceAPI Design Best Practices: Pagination, Errors, Versioning & Type SafetyAPI Versioning Strategies for Frontend CompatibilityPagination: Offset vs Cursor-BasedRate Limiting & API Resilience: Retries, Backoff, Jitter, IdempotencyHow Frontend Developers Can Handle Millions of API Requests Without Crashing EverythingBrowser Storage: Cookies, SessionStorage, LocalStorage, IndexedDBReal-time Communication: WebSockets, SSE & PollingWebRTC: Real-Time Communication in the BrowserCore Web Vitals: LCP, INP & CLSPerformance Optimization Trade-offsCritical Resource Prioritization: Optimize Loading OrderCode Splitting: Optimize Bundle Size with Dynamic ImportsTree Shaking: Eliminate Dead Code from Your BundleLazy Loading: Load Resources On-DemandResource Hints: Preload, Prefetch & PreconnectText Compression: Gzip and BrotliImage & Video Optimization: Modern Formats & TechniquesAdaptive Loading: Optimize for Device & NetworkList Virtualization: Render Large Lists EfficientlyWeb Workers vs Main Thread: Offloading Heavy WorkMemory Leaks in Frontend Apps: Detection & PreventionManaging Third-Party Scripts: Optimization StrategiesHow CDNs Work: Edge Delivery, Caching & PerformanceHTTP Caching Deep Dive: Cache-Control, ETag & RevalidationService Workers & Offline Strategy: Cache First, Network First & Update LifecyclePWA Fundamentals: Manifest, Installability & Offline UXCritical Rendering PathScript Loading: async vs deferEvent Loop: Understanding JavaScript Execution ModelJavaScript Module Systems: CJS vs ESM vs UMDDynamic Module Loading: import() FunctionImport on Interaction: Load When User InteractsImport on Visibility: Lazy Loading with IntersectionObserverBrowser Rendering Pipeline & Layout ThrashingRendering Strategies: CSR vs SSR vs SSG vs ISRStreaming SSR: Progressive HTML StreamingIslands Architecture: Independent Component HydrationReact Server Components: Zero-JS Server RenderingFramework Reactivity: React, Vue, Svelte & SolidHTTP/1.1 vs HTTP/2 vs HTTP/3 (QUIC) for Frontend PerformanceDNS Resolution: Path, TTL, Caching & Frontend ImpactCross-Site Scripting (XSS) AttacksCross-Site Request Forgery (CSRF) AttacksCORS Explained: Cross-Origin Resource SharingCORS Preflight in Practice: Credentials, Simple Requests & MisconfigurationsContent Security Policy (CSP)Why is HTTPS Secure? Understanding TLS/SSLAuthorization Best PracticesCookie Security & Session Hardening: SameSite, HttpOnly, Secure
mediumSecurity

CORS Preflight in Practice: Credentials, Simple Requests & Misconfigurations

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.

PropertySimple RequestPreflight Request
MethodsGET, HEAD, POST (basic Content-Type)PUT, DELETE, custom headers, application/json
Common UseBasic data fetchingState-changing operations
Triggers PreflightNoYes (OPTIONS)

Simple Request

Methods

GET, HEAD, POST (basic Content-Type)

Common Use

Basic data fetching

Triggers Preflight

No

Preflight Request

Methods

PUT, DELETE, custom headers, application/json

Common Use

State-changing operations

Triggers Preflight

Yes (OPTIONS)

Common questions

  • ›“When does the browser send a preflight request?”
  • ›“Why can't I use Access-Control-Allow-Origin: * with credentials?”
  • ›“How do you fix a CORS error when using Authorization header?”
  • ›“Explain credentialed CORS and its restrictions.”

What interviewers look for

  • Clear distinction between simple and preflight requests
  • Understanding of credentialed request rules
  • Practical debugging mindset (preflight + actual response)
  • Knowledge of common misconfigurations and proxies

Short answer (60 sec)

Preflight (OPTIONS) is sent before non-simple requests (PUT/DELETE, custom headers, JSON). For credentialed requests, the server must return a specific origin and Access-Control-Allow-Credentials: true. Wildcard origin is not allowed with credentials.

Detailed answer (senior level)

Simple requests go directly. Non-simple ones trigger preflight. Credentialed requests are stricter: no wildcard origin allowed. Common failures: missing headers on actual response, incorrect Allow-Headers, proxy/CDN stripping headers, or using * with credentials. Always check both preflight and real response in DevTools.

  • Handling OPTIONS only but forgetting CORS headers on real response
  • Using wildcard origin with credentials
  • Forgetting to include custom headers in Access-Control-Allow-Headers
  • Assuming all POST requests are simple (JSON often triggers preflight)
  • Not testing with real credentials and cross-origin setup
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
Previous TopicCORS Explained: Cross-Origin Resource SharingNext Topic Content Security Policy (CSP)

On this page