CORS: что это и как настроить

Что такое CORS

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

По умолчанию браузеры блокируют кросс-доменные (cross-origin) запросы по соображениям безопасности — это называется Same-Origin Policy. CORS позволяет серверу явно разрешить запросы с определённых источников.

Пример кросс-доменного запроса: фронтенд на https://app.example.com делает запрос к API на https://api.example.com. Браузер заблокирует это без настройки CORS.

Зачем нужен CORS

Безопасность API: CORS ограничивает список доменов, которые могут делать запросы к вашему API.

Защита от CSRF: правильная настройка CORS помогает предотвратить атаки подделки запросов.

Мобильные приложения и SPA: Single Page Applications на отдельном домене требуют CORS.

Микросервисная архитектура: взаимодействие между сервисами через браузер требует CORS.

Как работает CORS

Простые запросы (Simple Requests)

GET, POST с Content-Type: application/x-www-form-urlencoded — браузер добавляет заголовок Origin и проверяет ответ.

Предварительный запрос (Preflight)

Для сложных запросов (PUT, DELETE, кастомные заголовки) браузер сначала отправляет OPTIONS запрос:

OPTIONS /api/users HTTP/1.1
Origin: https://app.example.com
Access-Control-Request-Method: POST
Access-Control-Request-Headers: Content-Type, Authorization

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

HTTP/1.1 204 No Content
Access-Control-Allow-Origin: https://app.example.com
Access-Control-Allow-Methods: GET, POST, PUT, DELETE
Access-Control-Allow-Headers: Content-Type, Authorization
Access-Control-Max-Age: 86400

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

Ответные заголовки сервера

Access-Control-Allow-Origin — разрешённые источники:

Access-Control-Allow-Origin: https://app.example.com
Access-Control-Allow-Origin: *

Access-Control-Allow-Methods — разрешённые HTTP-методы:

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

Access-Control-Allow-Headers — разрешённые заголовки запроса:

Access-Control-Allow-Headers: Content-Type, Authorization, X-Requested-With

Access-Control-Allow-Credentials — разрешить передачу куки:

Access-Control-Allow-Credentials: true

Access-Control-Max-Age — кеширование preflight ответа (секунды):

Access-Control-Max-Age: 86400

Настройка CORS в Next.js

// next.config.js
async headers() {
  return [{
    source: '/api/:path*',
    headers: [{
      key: 'Access-Control-Allow-Origin',
      value: 'https://app.example.com'
    }]
  }]
}

Настройка CORS в Nginx

location /api/ {
    add_header 'Access-Control-Allow-Origin' 'https://app.example.com' always;
    add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS' always;

    if ($request_method = 'OPTIONS') {
        return 204;
    }
}

Проверка CORS на reChecker

Используйте Security Headers для проверки CORS конфигурации. Инструмент покажет:

• Наличие и значение Access-Control-Allow-Origin
• Потенциально опасный wildcard (*)
• Другие заголовки безопасности
• Рекомендации по улучшению

FAQ

Wildcard (*) в CORS — это опасно? Да для API с авторизацией. Wildcard разрешает запросы с любого домена. Если API использует cookies для аутентификации, wildcard + Allow-Credentials создаёт уязвимость CSRF. Всегда указывайте конкретные домены.

CORS ошибки в браузере — как отлаживать? Откройте DevTools → Network вкладку → найдите заблокированный запрос. В Console будет детальное сообщение об ошибке. Проверьте что сервер возвращает правильные заголовки Access-Control-Allow-*.

CORS на сервере или в коде? Лучше на уровне сервера (Nginx/Apache) для единообразия. Но допустимо и в коде приложения, особенно если CORS правила сложные или зависят от пути запроса.