Зачем нужен запрос OPTIONS в http?

HTTP OPTIONS запрос: для чего он нужен

OPTIONS - это HTTP метод, который используется для получения информации о доступных методах и заголовках на сервере. Это фундаментальная часть архитектуры веба, особенно в контексте CORS.

Основное назначение

ОПТIONS запрос отвечает на вопрос: "Что я могу делать с этим ресурсом?" Клиент (обычно браузер) отправляет такой запрос, чтобы узнать:

• Какие HTTP методы поддерживает сервер (GET, POST, PUT, DELETE и т.д.)
• Какие заголовки допустимы
• Требуется ли аутентификация

CORS Preflight запросы

Самое распространённое использование OPTIONS - это CORS preflight запросы. Когда браузер отправляет "сложный" запрос (не GET/HEAD/POST или с нестандартными заголовками), он сначала отправляет OPTIONS запрос:

// Этот код вызовет preflight OPTIONS запрос
fetch('https://api.example.com/users', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
    'X-Custom-Header': 'value' // нестандартный заголовок
  },
  body: JSON.stringify({ name: 'John' })
});

Браузер сначала отправит:

OPTIONS /users HTTP/1.1
Host: api.example.com
Origin: https://app.example.com
Access-Control-Request-Method: POST
Access-Control-Request-Headers: content-type, x-custom-header

Как сервер отвечает на OPTIONS

Сервер должен вернуть:

// На Node.js с Express
app.options('/users', (req, res) => {
  res.header('Access-Control-Allow-Origin', 'https://app.example.com');
  res.header('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE');
  res.header('Access-Control-Allow-Headers', 'Content-Type, X-Custom-Header');
  res.header('Access-Control-Max-Age', '3600');
  res.sendStatus(200);
});

// Или для всех маршрутов
app.options('*', (req, res) => {
  res.header('Access-Control-Allow-Origin', '*');
  res.header('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS');
  res.header('Access-Control-Allow-Headers', '*');
  res.sendStatus(200);
});

Когда OPTIONS запрос НЕ отправляется

Браузер НЕ отправляет preflight для:

• Простых GET/HEAD/POST запросов
• Запросов только со стандартными заголовками (Content-Type: application/x-www-form-urlencoded, multipart/form-data, text/plain)
• Запросов с одинаковым origin'ом (не требует CORS)

// Без preflight - простой GET
fetch('https://api.example.com/users')
  .then(r => r.json());

// С preflight - POST с JSON
fetch('https://api.example.com/users', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({ name: 'John' })
});

Практический пример из реальной жизни

// Компонент React, который делает CORS запрос
function fetchUserData(userId) {
  return fetch(`https://api.example.com/users/${userId}`, {
    method: 'PUT',
    headers: {
      'Content-Type': 'application/json',
      'Authorization': 'Bearer token123'
    },
    body: JSON.stringify({ status: 'active' })
  });
}

Этот запрос вызовет preflight OPTIONS, потому что:

• Метод PUT (не простой)
• Есть нестандартный заголовок Authorization

ACCESS-CONTROL-MAX-AGE: кэширование результатов

res.header('Access-Control-Max-Age', '86400'); // кэш на 24 часа

Браузер запомнит результат OPTIONS запроса и не будет отправлять его снова в течение указанного времени.

Ошибки CORS и OPTIONS

Если сервер неправильно отвечает на OPTIONS:

fetch('https://api.example.com/users', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({ name: 'John' })
}).catch(err => {
  // "Access to XMLHttpRequest has been blocked by CORS policy"
  console.error(err);
});

Вывод

OPTIONS запрос - это механизм безопасности, который позволяет браузерам проверять, разрешает ли сервер кроссдоменные запросы. Для фронтенд-разработчика это значит:

• Понимать CORS ограничения
• Знать, какие запросы вызывают preflight
• Убедиться, что backend правильно настроен на CORS