JavaScript LinuxWindowsmacOS

JavaScript — CORS: No Access-Control-Allow-Origin header

  • Обновлено
  • Чтение ≈ 4 минуты
  • Нужны права администратора

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

Настройте заголовки CORS на сервере и обработку preflight.

В этой статье
  1. Что означает ошибка
  2. Причины и решения
  3. Кратко: причина, признак, действие
  4. Пошаговое решение
  5. Что такое preflight
  6. Как настроить правильно
  7. Временные решения для разработки

#Что означает ошибка

Сообщение
CORS

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

Важно: запрос на сервер при этом обычно доходит и даже обрабатывается — браузер блокирует только чтение ответа. Поэтому исправлять CORS нужно на стороне сервера, а не в клиентском JavaScript. Никакие настройки fetch не обойдут запрет, кроме режима no-cors, который возвращает «непрозрачный» ответ без данных.

Настройте заголовки CORS на сервере и обработку preflight.

#Причины и решения

Возможная причинаКак узнатьЧто делать
Нет заголовкаСервер.Проявляется как «CORS» или близкий по смыслу сбой.Добавьте.
PreflightOPTIONS.Проявляется как «CORS» или близкий по смыслу сбой.Обработайте.
КреденшалыРежим.Проявляется как «CORS» или близкий по смыслу сбой.Укажите origin.
ПроксиDev.Проявляется как «CORS» или близкий по смыслу сбой.Настройте.

#Кратко: причина, признак, действие

ПричинаКак узнатьЧто делать
Отсутствует разрешение источникаВ ответе на запрос нет Access-Control-Allow-Origin или он не совпадает с Origin страницыНа своём API разрешите точный адрес фронтенда; проверьте HTTPS, порт и Vary: Origin при динамическом выборе.
Предварительный запрос OPTIONS не проходитВ Network виден OPTIONS с 401/403/405 или без CORS-заголовковНастройте ответ на OPTIONS и Access-Control-Allow-Methods / Access-Control-Allow-Headers.
Cookie в межсайтовом запросеКлиент задаёт credentials: include, но разрешение возвращает звёздочкуУкажите конкретный Origin, Access-Control-Allow-Credentials: true и проверьте атрибуты cookie.
Сеть, сертификат или проксиВ Network нет ответа либо ошибка DNS/TLS; Console может выглядеть как CORSСначала устраните сетевой/TLS-сбой, затем диагностируйте CORS.

#Пошаговое решение

  1. Откройте инструменты разработчика и найдите запросВ браузере Chrome/Edge нажмите F12 (либо Ctrl+Shift+I) → вкладка Network («Сеть»), поставьте отметку Preserve log («Сохранять журнал») при необходимости и обновите страницу. Нажмите строку неудачного запроса: запишите Request URL, Request Method, статус ответа и Origin в заголовках запроса. В Console найдите полный текст ошибки. Если запрос не дошёл до сервера из-за DNS/TLS, правка CORS его не исправит.
  2. Определите владельца сервера APIПосмотрите, к какому домену обращается страница. Если это чужой API, вы не можете разрешить его CORS из клиентского JavaScript: используйте официальный способ авторизации API либо собственный сервер-посредник с соблюдением правил сервиса. Не устанавливайте расширения браузера для отключения CORS и не запускайте браузер с выключенной веб-защитой.
  3. Разрешите конкретный адрес сайта на своём сервереЕсли API под вашим управлением, настройте сервер так, чтобы ответ на разрешённый запрос содержал Access-Control-Allow-Origin: https://example.com (вместо https://example.com укажите фактический Origin сайта, включая протокол и порт). В Express установите серверную библиотеку в каталоге проекта командой npm install cors; в коде сервера подключите cors до маршрутов и разрешите только доверенные адреса. Не копируйте *, если передаются cookie или другие учётные данные.
  4. Обработайте предварительный запрос OPTIONSЕсли браузер отправляет запрос с Authorization, Content-Type: application/json или нестандартными заголовками, во вкладке Network найдите сначала OPTIONS. Сервер должен разрешить нужный метод в Access-Control-Allow-Methods и фактические заголовки в Access-Control-Allow-Headers, а также корректно ответить на OPTIONS. Проверьте, что запрос не перенаправляется на вход и не блокируется прокси. Не добавляйте заголовки только в ответ основного GET/POST.
  5. Отдельно проверьте запросы с cookieЕсли клиент использует fetch(url, { credentials: "include" }), сервер должен вернуть точный разрешённый Origin и Access-Control-Allow-Credentials: true; Access-Control-Allow-Origin: * здесь недопустим. Проверьте также SameSite и Secure у cookie и политику браузера: одних CORS-заголовков для межсайтовой авторизации бывает недостаточно.
  6. Проверьте исправление в браузереПерезапустите ваш сервер/API, если изменилась конфигурация, очистите старые записи Network и повторите действие. В ответе OPTIONS (если он был) и итоговом ответе должны присутствовать соответствующие разрешения; в Console не должно быть ошибки CORS. Если ответ 401/403, это уже ошибка авторизации, а не повод разрешать любой источник. При отсутствии доступа к серверу передайте разработчику API Origin, метод и названия заголовков без токенов.

#Что такое preflight

Для «непростых» запросов (методы PUT, DELETE, нестандартные заголовки, JSON в Content-Type) браузер сначала отправляет предварительный запрос OPTIONS. Сервер должен ответить статусом 200/204 и заголовками Access-Control-Allow-Methods и Access-Control-Allow-Headers. Если OPTIONS обрабатывается как неизвестный маршрут или блокируется авторизацией, запрос не пройдёт.

#Как настроить правильно

Возвращайте Access-Control-Allow-Origin с точным доменом клиента, а не звёздочкой, если используются cookie или заголовок Authorization; в этом случае добавьте Access-Control-Allow-Credentials: true. Заголовок Vary: Origin нужен, чтобы кеши не путали ответы. Не отражайте произвольный Origin без проверки — это уязвимость.

#Временные решения для разработки

В локальной разработке настройте прокси Vite или webpack-dev-server так, чтобы браузер обращался к своему источнику, а сервер разработки перенаправлял запросы к API. Не устанавливайте расширения, отключающие CORS: они скрывают проблему и ухудшают безопасность браузера.

NginxС осторожностьюПрава администратора
Иллюстрация для администратора своего API: изменить домен на реальный доверенный Origin, согласовать методы/заголовки с приложением и протестировать OPTIONS и обычный ответ. Проверить конфигурацию nginx -t до перезагрузки; пример не предназначен для вставки без проверки в произвольный блок Nginx.
location /api/ {
add_header Access-Control-Allow-Origin "https://app.example.com" always;
add_header Access-Control-Allow-Methods "GET, POST, OPTIONS" always;
add_header Access-Control-Allow-Headers "Authorization, Content-Type" always;
if ($request_method = OPTIONS) { return 204; }
}

Команда может изменить состояние системы или её настройки. Проверьте параметры и последствия перед запуском.

Так эту ошибку тоже называют

JavaScript — TypeError: Cannot read properties of undefined — причины и решение Проверяйте значение на undefined и используйте optional chaining. Программирование и базы данных JavaScript LinuxWindowsmacOS JavaScript — Cannot read properties of null (reading addEventListener) — причины и решение «Cannot read properties of null (reading 'addEventListener')» значит, что querySelector/getElementById вернул null: скрипт запущен до загрузки DOM, селектор неверен или … Программирование и базы данных JavaScript LinuxWindowsmacOS JavaScript — TypeError: x is not a function — причины и решение Ошибка означает вызов значения, не являющегося функцией: опечатка в имени, перезаписанная переменная или неверный объект. Проверьте тип значения через typeof и порядок п… Программирование и базы данных JavaScript LinuxWindowsmacOS Ошибка CORS в браузере: blocked by CORS policy — причины и решение Браузер блокирует запрос к другому источнику, если сервер не разрешил его заголовками CORS. Ниже — причины и порядок действий от простого к сложному. Программирование и базы данных JavaScript WindowsLinux JavaScript — TypeError: Failed to fetch — причины и решение «TypeError: Failed to fetch» значит, что браузер вообще не получил ответ: запрос заблокирован политикой CORS, расширением, смешанным содержимым или не дошёл до сервера. … Программирование и базы данных JavaScript LinuxWindowsmacOS

Источники и обновления

Последнее обновление статьи: 1 ноября 2026. Версии программ и интерфейсы меняются — если шаги не совпадают с вашей версией, сверяйтесь с документацией производителя.