Why Do Browsers Send Preflight OPTIONS Requests?
Browsers send preflight OPTIONS requests to check whether a cross-origin server understands modern CORS protocols and permits the requested HTTP method, custom headers, or credentials before sending the actual state-changing payload.
Detailed Technical Explanation
When an application sends a "non-simple" request—such as a `PUT`, `DELETE`, `PATCH`, or any request with `Content-Type: application/json` or an `Authorization` header—the browser pauses. Legacy web servers written before CORS were not designed to expect cross-origin JSON or DELETE commands. To protect these backend servers from unintended mutations, the browser dispatches an automated preliminary `OPTIONS` request asking: "Do you permit origin X to send method Y with headers Z?" Only if the server responds with matching `Access-Control-Allow-*` headers will the browser transmit the real request.
Technical Example & Code
The preliminary OPTIONS check executed by the browser before issuing a cross-origin JSON POST.
// 1. Browser sends Preflight Request:
OPTIONS /api/orders HTTP/1.1
Host: api.example.com
Origin: https://app.curious-techie.com
Access-Control-Request-Method: POST
Access-Control-Request-Headers: content-type, authorization
// 2. Server approves the interaction:
HTTP/1.1 204 No Content
Access-Control-Allow-Origin: https://app.curious-techie.com
Access-Control-Allow-Methods: GET, POST, OPTIONS
Access-Control-Allow-Headers: Content-Type, Authorization
Access-Control-Max-Age: 86400
// 3. Browser now automatically sends the actual POST request!Why This Is the Case (Underlying Architectural Rationale)
"Preflighting protects legacy server infrastructure from being altered by modern JavaScript APIs like `fetch()`. If browsers sent cross-origin `DELETE /account` requests directly, the backend might delete the account before the browser could inspect the response headers. The OPTIONS preflight ensures the server explicitly consents before any state mutation takes place."
Common Misconception vs Reality
"You can disable preflight requests in production by configuring a setting in client JavaScript."
Client JavaScript cannot disable preflight requests; the browser network stack enforces preflights automatically whenever a request uses non-simple headers or methods.
Related Curious-Techie Resources
How to Fix CORS Preflight Errors: Step-by-Step Guide →
Diagnose and resolve preflight 403 Forbidden errors, missing headers, and proxy redirection bugs.
Interactive ToolCORS Checker & Header Generator →
Test preflight OPTIONS handling and generate production-ready Express and Nginx CORS rules.
Developer ReferenceCORS Headers Reference & Specifications →
Related Questions in the Q&A Knowledge Base
CORS allows standard GET requests without a preflight check for backward compatibility with the legacy web. Because HTML tags like `<form>`, `<img>`, and `<script>` have always been able to issue cross-origin GET requests without pre-approval, requiring preflights for all GETs would have broken decades of existing web architecture.
HTTP 401 Unauthorized means the user is not authenticated (identity unknown; credentials missing or invalid), whereas HTTP 403 Forbidden means the user is authenticated (identity known), but lacks the necessary permissions to access the requested resource.
Using 'unsafe-inline' in a Content Security Policy defeats XSS protection because it instructs the browser to execute any inline script found in the HTML. Since Cross-Site Scripting works by injecting malicious inline script tags or event handlers, 'unsafe-inline' allows the attacker's payload to run freely.
Related Topic Ecosystem & Next Steps
Related Technical Articles
What Is CORS (Cross-Origin Resource Sharing)?
The standard protocol enabling controlled cross-origin data access in modern browsers.
CSP vs CORS: Differences in Browser Defense Mechanisms
Distinguishing outbound resource loading restrictions from inbound server access control.
Troubleshooting: No Access-Control-Allow-Origin Header Present
Diagnose and fix the most common browser cross-origin blocking error with production configs.
Hands-On Diagnostic Labs
Developer References & Specifications
Continue Learning
CORS Policy & Preflight Handshake Lab
Simulate preflight OPTIONS probes and adjust Access-Control-Allow-* headers inside the browser sandbox.