Какие знаешь CORS заголовки?

Основные CORS-заголовки и их назначение

CORS (Cross-Origin Resource Sharing) — это механизм, использующий **HTTP-заголовки**, чтобы браузер разрешил веб-приложению на одном источнике (origin) получать ресурсы с другого источника. Вот ключевые заголовки, разделенные на две категории: заголовки запроса (отправляемые клиентом) и заголовки ответа (отправляемые сервером).

Заголовки запроса (клиент → сервер)

Эти заголовки браузер автоматически добавляет к cross-origin запросам:

• Origin: Указывает источник (схема, домен, порт), откуда исходит запрос. Например: Origin: https://frontendapp.com. Это обязательный заголовок для всех CORS-запросов.
• Access-Control-Request-Method: Используется в preflight-запросах (OPTIONS). Сообщает серверу, какой HTTP. метод будет использоваться в фактическом запросе (например, PUT или DELETE).
• Access-Control1-Request-Headers: Также используется в preflight-запросах. Сообщает серверу, какие кастомные или небезопасные заголовки будут отправлены в фактическом запросе (например, X-Custom-Token).

Пример preflight-запроса:

OPTIONS /api/data HTTP/1.1
Host: backendapi.com
Origin: https://myapp.com
Access-Control-Request-Method: POST
Access-Control-Request-Headers: X-Auth-Token, Content-Type

Заголовки ответа (сервер → клиент)

Эти заголовки сервер должен включить в ответ, чтобы браузер разрешил доступ к ресурсу.

• Access-Control-Allow-Origin: Самый важный заголовок. Указывает, какие источники разрешены. Может содержать конкретный origin (например, https://frontendapp.com) или звездочку (*) для разрешения всем источникам (не рекомендуется для запросов с учетными данными).

  Access-Control-Allow-Origin: https://frontendapp.com
  // ИЛИ (с осторожностью)
  Access-Control-Allow-Origin: *
  

• Access-Control-[Allow-Methods: Указывает методы HTTP (например, GET, POST, PUT, DELETE), которые разрешены при cross-origin запросах к данному ресурсу.

  Access-Control-Allow-Methods: GET, POST, OPTIONS
  

• Access-Control-Allow-Headers: Указывает, какие заголовки запроса могут быть использованы при фактическом запросе. Это ответ на заголовок Access-Control-Request-Headers.

  Access-Control-Allow-Headers: X-Auth-Token, Content-Type, Authorization
  

• Access-Control-Allow-Credentials: Булево значение (true). Если установлено, браузеру разрешается отправлять учетные данные (куки, заголовки авторизации) вместе с cross-origin запросом. Важно: если этот заголовок true, то Access-Control-Allow-Origin НЕ может быть * — должен быть явно указан origin.

  Access-Control-Allow-Credentials: true
  

• Access-Control-Expose-Headers: По умолчанию браузер предоставляет JS на клиенте доступ только к "безопасным" заголовкам ответа (Cache-Control, Content-Language и т.д.). Этот заголовок перечисляет дополнительные заголовки ответа сервера, которые будут доступны клиенту.

  Access-Control-Expose-Headers: X-Total-Count, X-Custom-Header
  

• Access-Control-Max-Age: Указывает (в секундах), как долго браузер может кэшировать результаты preflight-Fзапроса, чтобы не отправлять OPTIONS перед каждым одинаковым запросом.

  Access-Control-Max-Age: 86400 // Кэшировать на 24 часа
  

Практический пример настройки на сервере (Node.js/Express)

Вот как эти заголовки применяются на практике при настройке CORS на сервере:

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

// Мидлварь для обработки CORS
app.use((req, res, next) => {
  // Разрешаем запросы только с нашего фронтенда
  const allowedOrigin = 'https://frontendapp.com';
  res.header('Access-Control-Allow-Origin', allowedOrigin);

  // Разрешаем отправку кук и учетных данных
  res.header('Access-Control-Allow-Credentials', 'true');

  // Если это preflight-запрос (OPTIONS)...
  if (req.method === 'OPTIONS') {
    // ...разрешаем необходимые методы
    res.header('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS');
    // ...разрешаем необходимые заголовки
    res.header('Access-Control-Allow-Headers', 'Authorization, Content-Type, X-Requested-With');
    // ...устанавливаем время кэширования preflight
    res.header('Access-Control-Max-Age', '3600');
    // Завершаем preflight-запрос
    return res.status(200).end();
  }

  // Для всех остальных запросов добавляем заголовок для доступа к кастомным заголовкам ответа
  res.header('Access-Control-Expose-Headers', 'X-Total-Count, X-Updated-At');

  next();
});

// Далее обработчики маршрутов...
app.get('/api/data', (req, res) => {
  res.json({ data: 'Конфиденциальная информация' });
  // В реальном ответе также будет отправлен заголовок 'X-Total-Count', который клиент сможет прочитать
});

Ключевые моменты для фронтенд-разработчика

1. Preflight-запрос — это автоматический OPTIONS-запрос браузера перед "небезопасными" методами (не GET, POST, HEAD) или при наличии кастомных заголовков. Фронтенд-разработчик должен понимать, почему некоторые запросы отправляются дважды.
2. Учетные данные (credentials) — если ваш фронтенд отправляет куки или заголовки авторизации (withCredentials: true в Fetch/XMLHttpRequest), сервер обязан ответить с Access-Control-Allow-Credentials: true и конкретным Access-Control-Allow-Origin, а не звездочкой.
3. Ошибки CORS видны только в браузере — при отладке всегда проверяйте вкладку Network в DevTools, чтобы увидеть, какие заголовки отправляются и получаются, и анализировать preflight-запросы.

Понимание этих заголовков критически важно для интеграции фронтенда с внешними API и для отладки проблем с доступом к ресурсам в современных распределенных приложениях.