CORS Preflight Requests Explained
What preflight requests are, when they happen, and how the OPTIONS method works.
CORS Preflight Requests Explained
What Is a Preflight Request?
A preflight request is an HTTP OPTIONS request that the browser sends before the actual request, to check if the server allows it.
When Does a Preflight Happen?
A preflight is triggered when the request is NOT "simple":
- Methods other than GET, POST, or HEAD (e.g., PUT, DELETE, PATCH).
- Custom headers (e.g., Authorization, X-Custom-Header).
- Content-Type other than application/x-www-form-urlencoded, multipart/form-data, or text/plain (e.g., application/json).
The OPTIONS Request
OPTIONS /api/users HTTP/1.1
Origin: https://myapp.com
Access-Control-Request-Method: PUT
Access-Control-Request-Headers: Content-Type, Authorization
The Server Response
HTTP/1.1 204 No Content
Access-Control-Allow-Origin: https://myapp.com
Access-Control-Allow-Methods: GET, POST, PUT, DELETE
Access-Control-Allow-Headers: Content-Type, Authorization
Access-Control-Max-Age: 3600
If the preflight succeeds, the browser sends the actual request (PUT, DELETE, etc.).
Access-Control-Max-Age
The browser caches the preflight result for the specified duration (in seconds). Within this period, subsequent requests do not trigger a new preflight.
The Takeaway
Preflight: an OPTIONS request sent before non-simple requests (PUT, DELETE, custom headers, JSON). The browser checks if the server allows the method, headers, and origin. If yes, the actual request is sent. The result is cached (Access-Control-Max-Age).
An HTTP OPTIONS request that the browser sends before the actual request, to check if the server allows it. It includes Access-Control-Request-Method and Access-Control-Request-Headers. The server responds with the allowed methods, headers, and origins.
When the request is not 'simple': methods other than GET/POST/HEAD (PUT, DELETE, PATCH), custom headers (Authorization, X-Custom), or Content-Type application/json. Simple requests (GET, POST with form data) do not trigger a preflight.
OPTIONS. The browser sends an OPTIONS request with Access-Control-Request-Method and Access-Control-Request-Headers. The server responds with 204 No Content and the CORS headers.
A header that tells the browser how long (in seconds) to cache the preflight result. Within this period, subsequent requests to the same URL do not trigger a new preflight. Common values: 3600 (1 hour).
Usually no. GET requests without custom headers are 'simple' and do not trigger a preflight. The browser sends the GET directly and checks the response headers. But a GET with a custom header (like Authorization) does trigger a preflight.
Ready to master React completely?
Want to upskill yourself, crack your next interview, and get your dream job? Join our comprehensive course to dive deeper with high-quality video tutorials, solve interview questions, and a premium community.
Master React
Want to upskill yourself, crack your next interview, and get your dream job? Join our comprehensive course.