Что такое OPTIONS?

Что такое OPTIONS?

OPTIONS - это HTTP метод, который используется для запроса информации о возможных методах общения с ресурсом на сервере. Это часть спецификации HTTP/1.1 и играет важную роль в безопасности веб-приложений, особенно при работе с CORS (Cross-Origin Resource Sharing).

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

Метод OPTIONS позволяет:

1. Узнать, какие HTTP методы поддерживает ресурс (GET, POST, PUT, DELETE и т.д.)
2. Получить информацию о заголовках которые сервер может обрабатывать
3. Реализовать CORS preflight запросы - браузер автоматически отправляет их перед опасными запросами

CORS Preflight запрос

Основное применение OPTIONS в современном веб - это preflight запросы для CORS. Когда браузер отправляет запрос, который может изменить данные на сервере (POST, PUT, DELETE) или содержит нестандартные заголовки, браузер сначала отправляет preflight запрос с методом OPTIONS.

// Этот код в браузере автоматически отправит preflight
fetch('https://api.example.com/users', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
    'Authorization': 'Bearer token123'
  },
  body: JSON.stringify({ name: 'Иван' })
});

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

OPTIONS /users HTTP/1.1
Origin: https://myapp.com
Access-Control-Request-Method: POST
Access-Control-Request-Headers: content-type, authorization

Сервер ответит:

Access-Control-Allow-Origin: https://myapp.com
Access-Control-Allow-Methods: GET, POST, PUT, DELETE, OPTIONS
Access-Control-Allow-Headers: Content-Type, Authorization
Access-Control-Max-Age: 86400

Только если preflight успешен, браузер отправит реальный POST запрос.

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

Bраузер отправляет OPTIONS автоматически, если:

1. Метод не "простой" (не GET, POST, HEAD)
2. Содержит нестандартные заголовки:
   • Authorization
   • Content-Type (кроме text/plain, application/x-www-form-urlencoded, multipart/form-data)
   • Любые кастомные заголовки

// Это вызовет preflight (Content-Type: application/json)
fetch('https://api.example.com/data', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({ data: 'test' })
});

// Это НЕ вызовет preflight (простой POST)
fetch('https://api.example.com/data', {
  method: 'POST',
  body: new FormData()
});

Реализация OPTIONS на бэкенде (FastAPI пример)

from fastapi import FastAPI
from fastapi.middleware.cors import CORSMiddleware

app = FastAPI()

# Конфигурация CORS
app.add_middleware(
    CORSMiddleware,
    allow_origins=['https://myapp.com'],
    allow_credentials=True,
    allow_methods=['GET', 'POST', 'PUT', 'DELETE', 'OPTIONS'],
    allow_headers=['Content-Type', 'Authorization'],
    max_age=86400  # Кешировать preflight на 24 часа
)

@app.post('/api/users')
async def create_user(data: dict):
    return { 'id': 1, 'name': data['name'] }

Пример с явной обработкой OPTIONS

from fastapi import FastAPI

app = FastAPI()

@app.options('/api/data')
async def options_data():
    return {
        'methods': ['GET', 'POST', 'PUT', 'DELETE'],
        'headers': ['Content-Type', 'Authorization']
    }

@app.get('/api/data')
async def get_data():
    return { 'data': [] }

@app.post('/api/data')
async def create_data(item: dict):
    return { 'id': 1, **item }

На фронтенде (React)

import { useState } from 'react';

function DataForm() {
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState(null);

  const handleSubmit = async (e) => {
    e.preventDefault();
    setLoading(true);

    try {
      // Этот запрос вызовет preflight
      const response = await fetch('https://api.example.com/api/data', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
          'Authorization': 'Bearer ' + localStorage.getItem('token')
        },
        body: JSON.stringify({
          title: 'Новые данные',
          description: 'Описание'
        })
      });

      if (!response.ok) {
        throw new Error('Ошибка сервера');
      }

      const data = await response.json();
      console.log('Данные созданы:', data);
    } catch (err) {
      setError(err.message);
    } finally {
      setLoading(false);
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <input type="text" placeholder="Заголовок" />
      <button disabled={loading}>
        {loading ? 'Загрузка...' : 'Отправить'}
      </button>
      {error && <span className="error">{error}</span>}
    </form>
  );
}

Отладка preflight запросов

В DevTools браузера (вкладка Network):

1. Ищите запрос с методом OPTIONS
2. Проверьте заголовки ответа:
   • Access-Control-Allow-Methods
   • Access-Control-Allow-Headers
   • Access-Control-Allow-Origin

Request:
OPTIONS /api/data HTTP/1.1
Origin: https://localhost:3000
Access-Control-Request-Method: POST
Access-Control-Request-Headers: content-type, authorization

Response:
HTTP/1.1 200 OK
Access-Control-Allow-Origin: https://localhost:3000
Access-Control-Allow-Methods: GET, POST, PUT, DELETE
Access-Control-Allow-Headers: Content-Type, Authorization
Access-Control-Max-Age: 86400

Оптимизация: кеширование preflight

Заголовок Access-Control-Max-Age указывает, как долго браузер может кешировать результаты preflight:

Access-Control-Max-Age: 86400  // 24 часа в секундах

Результат:

• Первый запрос: OPTIONS (preflight) + реальный запрос
• Следующие 24 часа: только реальный запрос

Когда OPTIONS важен?

1. API интеграция - при работе с внешними API
2. Микросервисы - при коммуникации между доменами
3. Аутентификация - при передаче токенов
4. Безопасность - защита от CSRF атак

Заключение

OPTIONS - это HTTP метод, который:

• Используется браузером для preflight запросов перед опасными операциями
• Позволяет серверу указать, какие методы и заголовки он поддерживает
• Критичен для работы CORS
• Автоматически управляется браузером (вам обычно не нужно вызывать его вручную)
• Может быть оптимизирован через кеширование

Понимание OPTIONS и CORS важно для разработки современных веб-приложений, особенно при работе с REST API.