Suggest an edit

Improve this article

Refine the answer for “What is a preflight request?”. Your changes go to moderation before they’re published.

Approval required

Content

What you’re changing

Title (EN)

Short answer (EN)

Shown above the full answer for quick recall.

Answer (EN)

## 1. Why it's needed

CORS (Cross-Origin Resource Sharing) is a security mechanism.
The browser won't let JavaScript code make *risky or non-simple* requests to another domain
unless the server has **explicitly** confirmed that it's safe.

To check whether a request can go through, the browser sends a **preflight**, a reconnaissance request using the `OPTIONS` method.

## 2. When the browser sends a preflight

A preflight **doesn't happen every time**.
It's needed **only** when a request **is not "simple"** (a simple request).

### Simple requests:

- Method: `GET`, `HEAD`, or `POST`
- Headers: only "basic" ones (`Accept`, `Content-Type` = `text/plain`, `application/x-www-form-urlencoded`, `multipart/form-data`)
- No custom headers (`Authorization`, `X-*`, etc.)
- No credentials (cookies, tokens) without explicit permission

Everything else is a "non-simple" request, so a preflight goes first.

## 3. What a preflight request looks like

It's an `OPTIONS` request that the browser sends **automatically**:

```javascript
OPTIONS /api/data HTTP/1.1
Origin: https://frontend.com
Access-Control-Request-Method: POST
Access-Control-Request-Headers: Content-Type, Authorization
```

It **has no data** (no body), just headers.
Its purpose is to ask the server:

> "Will you allow a POST request afterward with these headers?"

## 4. What the server must respond with

If the server agrees, it returns permissive CORS headers:

```javascript
HTTP/1.1 204 No Content
Access-Control-Allow-Origin: https://frontend.com
Access-Control-Allow-Methods: GET, POST, PUT
Access-Control-Allow-Headers: Content-Type, Authorization
Access-Control-Max-Age: 600
```

Key headers:

- `Access-Control-Allow-Origin`, who's allowed
- `Access-Control-Allow-Methods`, which methods are allowed
- `Access-Control-Allow-Headers`, which headers are permitted
- `Access-Control-Max-Age`, how many seconds the preflight result can be cached (so it isn't repeated every time)

Only then does the browser **make the real request** (`POST /api/data`).

## 5. If the server doesn't respond correctly

The browser **won't send the main request** -
it simply blocks it and shows an error in the console:

> "CORS policy: Request header field Authorization is not allowed by Access-Control-Allow-Headers in preflight response"

So a preflight is protection against unauthorized requests.

## 6. An example in Node.js

Here's how to correctly handle a preflight request on the server:

```javascript
import http from 'node:http';

const server = http.createServer((req, res) => {
  // Common CORS headers
  res.setHeader('Access-Control-Allow-Origin', 'https://frontend.com');
  res.setHeader('Access-Control-Allow-Methods', 'GET,POST,PUT,DELETE,OPTIONS');
  res.setHeader('Access-Control-Allow-Headers', 'Content-Type,Authorization');

if (req.method === 'OPTIONS') {
    // This is a preflight, respond with no body
    res.writeHead(204);
    res.end();
    return;
  }

// All other requests, ordinary logic
  res.end('OK');
});

server.listen(3000);
```

## 7. In short and simple terms

> A **preflight request** is an automatic `OPTIONS` request
> the browser sends **before a "risky" CORS request**,
> to make sure the server allows:
>
> - the needed method (`POST`, `PUT`, `DELETE`, etc.),
> - the needed headers (`Authorization`, `Content-Type`, etc.),
> - and the origin itself (the domain).

## 8. An analogy

> Imagine the browser is carrying cargo across a border (a domain).
> First it sends an **inspector (the preflight)** to ask:
> "Can I bring these goods in with these documents?"
>
> If customs (the server) says "yes", the browser lets the main request through.
> If not, the request never crosses the border.

Markdown · drag & drop images · ⌘B / ⌘I shortcuts498 words

For the reviewer

Note to the moderator (optional)

Visible only to the moderator. Helps review go faster.