CORS preflight: определение, применение и примеры

CORS preflight — OPTIONS-запрос, который браузер отправляет перед "сложным" cross-origin запросом (нестандартные заголовки, методы PUT/DELETE). Сервер должен ответить 200 с заголовками Access-Control-Allow-Methods / Headers. Если preflight fails, основной запрос не отправляется. Частая причина "CORS errors" в консоли браузера.

Открыть инструмент →

Чтобы проверить, есть ли на сайте CORS preflight, можно выполнить следующие шаги:

• Открыть инструменты разработчика в браузере (обычно через комбинацию клавиш Ctrl+Shift+I).
• Перейти на вкладку Network или XHR (в зависимости от браузера).
• Выполнить тестовый кросс-доменный запрос, например, через XMLHttpRequest или Fetch API.
• Проверить, отправляется ли перед основным запросом OPTIONS-запрос.
• Если да, то на сайте используется CORS preflight.

Пример команды для отправки тестового запроса через XMLHttpRequest:

Для корректной работы CORS на сервере необходимо настроить соответствующие заголовки. Это можно сделать с помощью конфигурационных файлов или непосредственно в коде сервера.

• Добавьте заголовок Access-Control-Allow-Origin с указанием домена, которому разрешён доступ.
• Укажите методы, которые разрешены для кросс-доменных запросов, с помощью заголовка Access-Control-Allow-Methods.
• Разрешите необходимые заголовки с помощью Access-Control-Allow-Headers.
• Пример конфигурации для Node.js с использованием Express:
app.use((req, res, next) => { res.header('Access-Control-Allow-Origin', 'https://example.com'); res.header('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE'); res.header('Access-Control-Allow-Headers', 'Content-Type, Authorization'); next(); });

При работе с CORS preflight могут возникать различные ошибки. Вот некоторые из них и способы их устранения:

• Ошибка 404 или 500 при отправке OPTIONS-запроса — проверьте правильность настройки сервера и корректность URL.
• Отсутствие заголовков Access-Control-Allow-* — убедитесь, что сервер правильно отвечает на OPTIONS-запросы.
• Запрет на методы или заголовки — проверьте, соответствуют ли методы и заголовки вашего запроса настроенным на сервере.
• Проблемы с CORS на стороне клиента — убедитесь, что ваш браузер поддерживает CORS и что вы правильно настроили запросы.
• Пример ошибки в консоли браузера:
<p>Access to XMLHttpRequest at 'https://example.com/api' from origin 'https://yourdomain.com' has been blocked by CORS policy</p>

Для устранения этой ошибки необходимо настроить CORS на сервере, как описано выше.