В каких случаях отправляется OPTIONS-запрос при кросс-доменных запросах, и в чём разница между простыми (simple) и сложными (preflighted) запросами?

Что такое CORS и зачем нужен preflight

Когда браузер выполняет запрос на другой домен (кросс-доменный), он применяет политику CORS (Cross-Origin Resource Sharing). Сервер должен явно разрешить доступ, указав заголовки в ответе. Для некоторых запросов браузер сначала отправляет предварительный OPTIONS-запрос, чтобы узнать, разрешён ли основной запрос. Это защищает сервер от нежелательных операций, таких как удаление данных или отправка сложных данных без согласия.

Простые запросы (simple requests)

Простые запросы не требуют preflight. Они удовлетворяют строгим условиям: метод — GET, HEAD или POST; заголовки — только стандартные (Accept, Accept-Language, Content-Language, Content-Type с ограничениями); Content-Type — один из трёх: text/plain, multipart/form-data или application/x-www-form-urlencoded. Браузер отправляет такой запрос напрямую, а ответ проверяет на наличие CORS-заголовков. Если сервер не разрешил доступ, браузер блокирует чтение ответа, но сам запрос доходит до сервера.

Сложные запросы (preflighted requests)

Любой запрос, который не подходит под условия простого, считается сложным. Например, метод PUT или DELETE, кастомный заголовок Authorization, Content-Type: application/json. Для таких запросов браузер сначала отправляет OPTIONS-запрос на тот же URL с заголовками Access-Control-Request-Method и Access-Control-Request-Headers. Сервер должен ответить с Access-Control-Allow-Methods и Access-Control-Allow-Headers. Только после успешного ответа браузер отправляет основной запрос.

Пример кода

// Простой запрос (не требует preflight)
fetch('https://api.example.com/data', {
  method: 'POST',
  headers: { 'Content-Type': 'text/plain' },
  body: 'hello'
});

// Сложный запрос (требует preflight)
fetch('https://api.example.com/data', {
  method: 'PUT',
  headers: {
    'Content-Type': 'application/json',
    'Authorization': 'Bearer token'
  },
  body: JSON.stringify({ key: 'value' })
});

В первом случае браузер сразу отправит POST. Во втором — сначала OPTIONS, и только потом PUT.

Практическое применение

Разработчикам важно понимать, когда возникает preflight, чтобы правильно настроить сервер: добавить обработку OPTIONS и вернуть корректные CORS-заголовки. Например, в Express можно использовать middleware cors, который автоматически обрабатывает preflight. Если сервер не отвечает на OPTIONS, браузер заблокирует основной запрос, и клиент увидит ошибку в консоли.

Итог

OPTIONS-запрос отправляется только для сложных кросс-доменных запросов, чтобы сервер подтвердил разрешение. Простые запросы идут напрямую, но их ответы всё равно проверяются на CORS. Знание этого механизма помогает избежать ошибок при разработке API и настройке серверной части.