База для QA
К списку
Web-тестирование и DevToolsLeadФинал

Как распознать и диагностировать ошибку CORS в браузере

Краткий ответ

Ошибка CORS возникает, когда браузер блокирует запросы к другому домену из-за отсутствия необходимых заголовков разрешения. Об этом сигнализирует сообщение об ошибке с упоминанием "CORS policy" или "Access-Control-Allow-Origin" в консоли разработчика.

Развёрнуто

Краткий ответ

Ошибка CORS появляется, когда браузер запрещает запрос к внешнему ресурсу из-за политики безопасности, связанной с заголовками разрешения. Это легко заметить по ошибкам в консоли, содержащим ключевые фразы вроде "CORS policy".

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

CORS (Cross-Origin Resource Sharing) — механизм, который регулирует, могут ли веб-страницы делать запросы к ресурсам на другом домене. Если сервер не возвращает заголовок Access-Control-Allow-Origin с разрешающим доменом, браузер блокирует ответ, чтобы предотвратить потенциально опасные междоменные запросы.

Основные моменты:

  • Запрос считается кросс-доменным, если домен, протокол или порт отличаются.
  • Браузер проверяет наличие и корректность заголовков CORS в ответе сервера.
  • При отсутствии или неправильных заголовках возникает ошибка, блокирующая доступ к данным.
Сценарий Что происходит
Заголовок есть Браузер разрешает запрос и возвращает данные
Заголовок отсутствует Запрос блокируется, ошибка CORS выводится в консоли

Пример

Access to XMLHttpRequest at 'https://api.example.com/data' from origin 'https://my.site.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

Это сообщение говорит, что браузер заблокировал запрос, так как сервер не разрешил доступ с домена https://my.site.com.

Что важно знать на собеседовании

  • CORS реализован на стороне браузера и контролируется заголовками сервера.
  • Главное заголовок — Access-Control-Allow-Origin, определяющий разрешённые источники.
  • Ошибки CORS легко отследить через вкладку Console в DevTools.
  • Иногда нужны дополнительные заголовки, такие как Access-Control-Allow-Methods и Access-Control-Allow-Headers.
  • Умение анализировать CORS-политику важно для тестирования API и веб-приложений.

Тема: Web-тестирование и DevTools | Уровень: lead