Запропонувати правку

Покращити цю статтю

Допрацюйте відповідь до «Що таке preflight request?». Ваші зміни проходять модерацію перед публікацією.

Потрібне підтвердження

Контент

Що ви змінюєте

Заголовок (UA)

Коротка відповідь (UA)

Показується над повною відповіддю для швидкого нагадування.

Відповідь (UA)

## 1. Навіщо він потрібен

CORS (Cross-Origin Resource Sharing) - механізм безпеки.
Браузер не дозволяє JavaScript-коду робити *небезпечні чи нестандартні* запити до іншого домену,
якщо сервер **явно** не підтвердив, що це безпечно.

Щоб перевірити, чи можна виконати запит, браузер робить **preflight** - запит-розвідку з методом `OPTIONS`.

## 2. Коли браузер робить preflight

Preflight **не виконується завжди**.
Він потрібен **лише**, якщо запит **не є "простим"** (simple request).

### Прості запити:

- Метод - `GET`, `HEAD` чи `POST`
- Заголовки - лише "базові" (`Accept`, `Content-Type` = `text/plain`, `application/x-www-form-urlencoded`, `multipart/form-data`)
- Немає користувацьких заголовків (`Authorization`, `X-*` тощо)
- Немає credentials (cookies, токенів) без явного дозволу

Усе інше - "нестандартний" запит ⇒ спершу робиться preflight.

## 3. Як виглядає preflight-запит

Це `OPTIONS`-запит, який браузер робить **автоматично**:

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

Він **не містить даних** (тіла), лише заголовки.
Його мета - запитати в сервера:

> "Чи можна потім зробити POST-запит із такими заголовками?"

## 4. Що має відповісти сервер

Якщо сервер згоден, він повертає дозвільні CORS-заголовки:

```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
```

Ключові заголовки:

- `Access-Control-Allow-Origin` - кому можна
- `Access-Control-Allow-Methods` - які методи дозволені
- `Access-Control-Allow-Headers` - які заголовки допустимі
- `Access-Control-Max-Age` - скільки секунд можна кешувати результат preflight (щоб не повторювати його щоразу)

Після цього браузер **виконує реальний запит** (`POST /api/data`).

## 5. Якщо сервер не відповість правильно

Браузер **не надішле основний запит** -
він просто заблокує його і покаже помилку в консолі:

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

Тобто preflight - це захист від несанкціонованих запитів.

## 6. Приклад у Node.js

Ось як правильно обробити preflight-запит на сервері:

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

const server = http.createServer((req, res) => {
  // Загальні CORS-заголовки
  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') {
    // Це preflight - відповідаємо без тіла
    res.writeHead(204);
    res.end();
    return;
  }

// Решта запитів - звичайна логіка
  res.end('OK');
});

server.listen(3000);
```

## 7. Коротко і просто

> **Preflight request** - це автоматичний запит `OPTIONS`,
> який браузер робить **перед "небезпечним" CORS-запитом**,
> щоб переконатися, що сервер дозволяє:
>
> - потрібний метод (`POST`, `PUT`, `DELETE` тощо),
> - потрібні заголовки (`Authorization`, `Content-Type` тощо),
> - і сам origin (домен).

## 8. Аналогія

> Уяви, що браузер перевозить вантаж через кордон (домен).
> Спершу він надсилає **інспектора (preflight)**, щоб запитати:
> "Чи можна ввозити ці товари і з такими документами?"
>
> Якщо митниця (сервер) відповідає "Так", браузер пропускає основний запит.
> Якщо ні - запит не перетинає кордон.

Markdown · перетягуйте зображення · ⌘B / ⌘I шорткати428 слів

Для рев’юера

Примітка для модератора (необов’язково)

Бачить лише модератор. Прискорює рев’ю.