К содержанию
CheckcraftСкачать
Практический сценарий

Ошибка CORS: почему в Postman работает, а в браузере нет

CORS — правило браузера, а не сервера и не сети. Postman и curl его не применяют, поэтому один и тот же запрос там работает, а со страницы сайта нет.

Checkcraft ·

Поможем с первой проверкой →

Что происходит

Браузер позволяет странице с одного адреса читать ответы другого адреса только с разрешения этого сервера. Разрешение — заголовок Access-Control-Allow-Origin в ответе. Если его нет или в нём другой адрес, браузер блокирует ответ и пишет в консоли has been blocked by CORS policy. Запрос при этом мог дойти до сервера и выполниться.

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

Для запросов с JSON, своими заголовками или методами PUT и DELETE браузер сначала отправляет OPTIONS и спрашивает, можно ли. Сервер должен ответить успешным кодом и заголовками Access-Control-Allow-Origin, Access-Control-Allow-Methods и Access-Control-Allow-Headers. Проверить ответ на такой запрос можно через curl.

curl -i -X OPTIONS https://api.example.com/orders \
  -H "Origin: https://app.example.com" \
  -H "Access-Control-Request-Method: POST" \
  -H "Access-Control-Request-Headers: content-type"

Как исправить

Настраивают сервер: разрешают конкретный адрес фронтенда, нужные методы и заголовки. Звёздочка в Access-Control-Allow-Origin не работает вместе с cookies и авторизацией через credentials: тогда нужен точный адрес. Для локальной разработки удобен прокси сервера разработки, который отправляет запросы к API от своего имени. Отключать защиту в браузере плохая идея: так можно не заметить ошибку, которая сломает рабочий сайт.

Как проверять API без браузера

Тестировать сам API удобнее там, где CORS не мешает: в curl, Postman или Checkcraft. А чтобы CORS не сломался после релиза, добавьте в проверки запрос OPTIONS с заголовком Origin и правило на Access-Control-Allow-Origin в ответе.

Следующий шаг

Повторите это на своём API

Checkcraft — настольная программа: сохраняет проверки ответа API без кода и показывает, что не совпало. Начните с учебного примера, затем подставьте свои обезличенные данные. Free работает на Windows и Linux без ограничения срока.

Скачать FreeКак получить и запустить приложение

Скачивание без регистрации и почты, архив готов за пару минут. Состав бесплатной версии опубликован на странице тарифов.

Документация

MDN: CORS

Начните с примера по ссылкам и сопоставьте результат с требованием своей проверки.

Можно спросить человека

Поможем с первой проверкой

Расскажите, что хотите проверить или на каком шаге остановились. Поможем запустить Checkcraft, подобрать пример и разобраться с первым прогоном. Можно написать до скачивания.

Telegram-группа открытая: не публикуйте пароли, токены и конфиденциальные рабочие данные. Для первого вопроса достаточно описания задачи.

Можно написать напрямую support@checkcraft.ru

Без регистрации. Ответим по email. Это обращение в поддержку, а не подписка на рассылку.