Що таке preflight request?

Node.jsJunior~2 хв читання

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), щоб запитати: "Чи можна ввозити ці товари і з такими документами?"

Якщо митниця (сервер) відповідає "Так", браузер пропускає основний запит. Якщо ні - запит не перетинає кордон.

Коротка відповідь

Для співбесіди

Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.