Preflight Requests

A preliminary OPTIONS request sent automatically by the browser to check if a server permits the actual cross-origin request.

Internet3 min readConcept 19 of 35

What it is

A CORS Preflight Request is a preliminary request sent automatically by the browser to check if a server understands and permits the actual cross-origin request.

It uses the HTTP OPTIONS method and includes specific headers like Access-Control-Request-Method and Access-Control-Request-Headers to describe the upcoming request to the server.

Why it matters

Preflight requests matter because they introduce an extra network round-trip, which can add significant **latency** to web applications.

Front-end developers must understand the distinction between 'simple requests' (which don't trigger a preflight) and 'complex requests' (which do), so they can optimize performance. A key optimization is ensuring the server caches preflight permissions via the Access-Control-Max-Age header.

How it works

When a browser executes a 'complex' cross-origin request (e.g., sending JSON or using custom headers), it intercepts the request.

It automatically sends an HTTP OPTIONS request (the preflight) to the server's endpoint.

The server inspects the requested method and headers, then responds with Access-Control-Allow-Methods, Access-Control-Allow-Headers, etc., indicating what is permitted.

If the server grants permission, the browser instantly sends the actual POST/PUT/DELETE request. If denied, the browser blocks the actual request and throws a CORS error.

Try it

Play the **Browser Security Guard Minigame**. Send a complex POST request, watch the Scout (OPTIONS) get permission, and configure the server to let the actual request through!

CORS Preflight Minigame

Browser

POST Payload
?
Allow Method: POSTAccess-Control-Allow-Methods
Allow Header: Content-TypeAccess-Control-Allow-Headers

Check yourself

Pick an answer to lock it in, then read why. Getting one wrong is part of how it sticks.

  1. 1Which HTTP method is automatically used by the browser to send a preflight request?
  2. 2Which of the following makes a request 'complex' and triggers a preflight request?
  3. 3How can a developer reduce the latency caused by preflight requests?

Remember this

  • Preflights are automatic OPTIONS requests sent by the browser.
  • They are triggered by 'complex' requests (custom headers, JSON bodies).
  • They add latency, but can be cached via Access-Control-Max-Age.

Done with this concept?

Mark it complete to track your progress. No login needed.