EMZETT.
Войти

Emzett Wiki

Ошибка CORS: blocked by CORS policy

Properties1
tagsglossar, fehlercodes, web

время чтения ~2 мин.

Ошибка CORS: blocked by CORS policy

Коротко: Браузер блокирует ответ с чужого источника, потому что сервер явно не разрешил этой странице доступ к нему.

Подробнее: Сообщение в консоли: Access to fetch at 'https://api.example.com' from origin 'https://my-site.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Это защита браузера, а не сервера: запрос дошёл, но страница не может прочитать ответ.

Подробности

Зачем это нужно

Политика одного источника (same-origin policy) не даёт странице (источник A) читать данные источника B. Источник состоит из протокола, хоста и порта. CORS позволяет серверу B давать избранным источникам доступ через заголовки. Для «непростых» запросов (JSON с Authorization, PUT/DELETE) браузер сначала отправляет предварительный запрос (preflight) (OPTIONS).

Типичные причины

  • Сервер не отправляет Access-Control-Allow-Origin.
  • Источник не совпадает (http и https, www и без, другой порт, опечатка).
  • Preflight (OPTIONS) не обрабатывается или возвращает 404/401.
  • Access-Control-Allow-Headers или -Methods не содержат отправляемого.
  • При cookie/учётных данных Access-Control-Allow-Origin не должен быть *, а нужно задать Access-Control-Allow-Credentials: true.
  • Страница ошибки (500/502) не содержит заголовков CORS и маскируется под ошибку CORS.

Решения

  1. На сервере задайте разрешённый источник: Access-Control-Allow-Origin: https://my-site.com и при необходимости -Methods, -Headers, -Max-Age. (Express: пакет cors; Next.js: заголовки в обработчиках маршрутов/next.config.)
  2. Отвечайте на preflight OPTIONS кодом 204.
  3. В разработке используйте прокси (Vite/Next rewrites), чтобы браузер обращался только к собственному источнику.
  4. Не используйте * вместе с cookie; проверяйте источники по списку разрешённых источников и возвращайте их обратно.
  5. Посмотрите вкладку «Сеть» (F12): какой ответ и какие заголовки действительно вернулись?

Расширения браузера для CORS «решают» только вашу локальную проблему, а не проблему пользователей.

См. также: CORS, HTTP-заголовки