Что такое preflight-запрос и когда он отправляется?

Предварительные (preflight) запросы являются важной частью механизма безопасности, связанного с CORS (Cross-Origin Resource Sharing) в веб-разработке.

Что такое CORS?

CORS — это стандарт, который позволяет ограничить доступ к ресурсам на одном домене с другого домена. Это важно для безопасности, так как без таких ограничений, злоумышленники могли бы отправлять запросы от вашего имени, используя ваши данные.

Какие бывают запросы?

Когда вы отправляете запрос с вашего фронтенда на сервер (например, с http://example.com на http://api.example.com), браузер должен удостовериться, что это безопасно. В зависимости от типа запроса, браузер может отправить preflight-запрос перед тем, как выполнить основной запрос.

Когда отправляется preflight-запрос?

Preflight-запрос отправляется для "непростых" (non-simple) запросов. Простые запросы — это те, которые используют только методы GET, POST и HEAD и определенные заголовки. Однако, если вы используете, например, метод PUT, DELETE или добавляете нестандартные заголовки, браузер выполнит preflight-запрос.

Как выглядит preflight-запрос?

Preflight-запрос — это HTTP-запрос типа OPTIONS. Он отправляется на сервер с информацией о том, какой метод, заголовки и другие параметры будут использоваться в последующем запросе. Вот простой пример такого запроса:

OPTIONS /api/resource HTTP/1.1
Host: api.example.com
Origin: http://example.com
Access-Control-Request-Method: POST
Access-Control-Request-Headers: X-Custom-Header

В ответ на этот запрос сервер должен вернуть заголовки, подтверждающие, что он разрешает такие запросы:

HTTP/1.1 200 OK
Access-Control-Allow-Origin: http://example.com
Access-Control-Allow-Methods: POST, GET, OPTIONS
Access-Control-Allow-Headers: X-Custom-Header

Как обрабатывать preflight-запросы на сервере?

На сервере вы можете обрабатывать preflight-запросы, добавляя необходимые заголовки. Например, если вы используете Node.js с Express, это можно сделать так:

const express = require('express');
const app = express();

app.use((req, res, next) => {
    res.header("Access-Control-Allow-Origin", "http://example.com");
    res.header("Access-Control-Allow-Methods", "GET, POST, PUT, DELETE, OPTIONS");
    res.header("Access-Control-Allow-Headers", "X-Custom-Header");
    if (req.method === 'OPTIONS') {
        return res.sendStatus(200);
    }
    next();
});

app.post('/api/resource', (req, res) => {
    res.send('Resource created');
});

app.listen(3000, () => {
    console.log('Server running on http://localhost:3000');
});

Заключение

Чтобы избежать проблем с CORS, всегда учитывайте необходимость в preflight-запросах при проектировании API. Если вы будете использовать простые запросы и следовать правилам CORS, то сможете обеспечить безопасное взаимодействие вашего фронтенда с бэкендом.