Preflight Request in CORS

Have you ever noticed the additional OPTIONS request sent before the actual CORS request in frontend web development?

Today, we're delving into this topic to gain a deeper understanding of CORS and its intricacies.

The Preflight Request

A preflight request is an HTTP request of the OPTIONS method.

  • It's dispatched before the actual request to determine if it is safe to proceed.
  • Only when the server responds positively does the actual HTTP request follow.

Demo Request

OPTIONS /api/data HTTP/1.1
Host: cross-domain.com
Origin: https://tinyfrontend.com
Access-Control-Request-Method: GET
Access-Control-Request-Headers: Content-Type, Authorization

Complex Request Only

Preflight requests are not mandatory for all CORS requests, they specifically apply to complex requests.

A complex request is characterized by the following criteria:

  1. HTTP Methods: It uses HTTP methods other than GET, POST, or HEAD.
  2. Custom Headers: It includes headers beyond the CORS Safelisted Headers, such as Accept, Accept-Language, or Content-Language.
  3. Content Types: It may involve specific content types beyond the default ones.
  4. Credentials: If the client declares withCredentials, indicating that credentials (such as cookies or authentication) should be sent with the request.

Subscribe to read the full content