В этой статье
Что такое CORS?
Cross-Origin Resource Sharing (CORS) — это механизм безопасности браузера, который контролирует, какие веб-источники могут получать доступ к ресурсам на вашем сервере. По умолчанию браузеры применяют политику одного источника, блокируя JavaScript-запросы к другому домену, порту или протоколу.
Заголовки CORS сообщают браузеру, какие кросс-доменные запросы разрешить. Без правильных заголовков вызовы API с фронтенда на одном домене к бекенду на другом завершатся ошибкой CORS. Генератор заголовков CORS создает правильные заголовки Access-Control-Allow-*.
Как работают заголовки CORS
CORS работает через набор HTTP-заголовков ответа, которые сервер отправляет, чтобы указать, какие источники, методы и заголовки разрешены для кросс-доменных запросов.
- Access-Control-Allow-Origin — указывает, какие источники могут получить доступ к ресурсу (конкретный домен или * для любого)
- Предварительные запросы — для нестандартных запросов браузеры сначала отправляют OPTIONS-запрос, чтобы проверить, разрешен ли фактический запрос
- Обработка учетных данных — Access-Control-Allow-Credentials: true разрешает cookies и заголовки авторизации, но требует конкретного источника
Попробуйте бесплатно — без регистрации
Сгенерировать заголовки CORS →Когда настраивать CORS
Настройка CORS необходима, когда ваш фронтенд и бекенд обслуживаются с разных источников.
- Разработка API — REST или GraphQL API, к которым обращаются фронтенд-приложения на других доменах, нуждаются в заголовках CORS
- Настройка CDN — обслуживание статических ресурсов с поддомена CDN требует CORS для файлов шрифтов и API-запросов
- Микросервисы — сервисы на разных портах во время локальной разработки нуждаются в CORS для коммуникации через браузер
Часто задаваемые вопросы
Почему нельзя просто использовать Access-Control-Allow-Origin: * для всего?
Символ * разрешает любой источник, что подходит для публичных API. Однако его нельзя использовать с учетными данными (cookies, заголовки Authorization). Если ваш API требует аутентификации, нужно указать точный источник.
Что такое предварительный запрос?
Предварительный запрос — это HTTP OPTIONS-запрос, который браузер автоматически отправляет перед фактическим запросом. Он проверяет, разрешает ли сервер метод, заголовки и источник.
Как исправить ошибку 'No Access-Control-Allow-Origin header'?
Добавьте заголовок Access-Control-Allow-Origin к ответу вашего сервера с доменом источника запроса. Для Express используйте middleware cors, для Nginx добавьте директивы add_header.