← Lessons

quiz vs the machine

Platinum1680

Frontend

CORS Preflight From the Browser

Why the browser sometimes sends an options request first.

5 min read · advanced · beat Platinum to climb

The same origin rule

By default the browser blocks a page from reading responses from a different origin. Cross origin resource sharing is the controlled way a server can opt in to letting another origin read its responses.

Simple versus preflighted

Some requests are simple and go straight out: basic methods with safe headers. Others must be preflighted first, including requests that use methods like put or delete, custom headers, or a JSON content type.

For a preflighted request the browser sends an options request asking permission. The server answers with headers that list the allowed origin, methods, and headers. Only if the answer permits the real request does the browser send it.

  • The preflight uses the options method automatically.
  • The browser caches the permission for a max age to avoid repeating it.
  • A missing or wrong allow origin header makes the browser block the response.

Note the request often still reaches the server; CORS stops the page from reading the response, not the server from receiving it.

Key idea

For non simple cross origin calls the browser sends an options preflight first, and only proceeds if the server returns headers permitting the origin, method, and headers.

Check yourself

Answer to earn rating on the learn ladder.

1. What triggers a CORS preflight?

2. Which method does the preflight use?

3. What does CORS actually prevent?