Ошибка CORS в браузере: причины и решения для разработчиков

Как проявляется проблема

• В консоли браузера написано: "Access to fetch at ... has been blocked by CORS policy"
• API-запрос работает в Postman или curl, но не в браузере
• Сетевой запрос имеет статус 0 или (failed) на вкладке Network
• Появляется только на локальном сервере разработки, не в продакшене
• Ошибка возникает после добавления нового домена или поддомена

Частые причины

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

1. 1

   Проверьте точный origin в браузере

   Откройте DevTools (F12) и в консоли введите location.origin. Запишите точное значение, например http://localhost:3000. На вкладке Network найдите неудачный запрос и посмотрите заголовки запроса и ответа. Обратите внимание на Origin в запросе и Access-Control-Allow-Origin в ответе.

2. 2

   Настройте CORS на сервере

   На бэкенде явно разрешите origin фронтенда. В Node.js/Express: app.use(cors({ origin: 'http://localhost:3000', credentials: true })). В Spring Boot: @CrossOrigin(origins = "http://localhost:3000") или глобальная конфигурация. В ASP.NET Core: builder.Services.AddCors(...) и app.UseCors(...). Всегда указывайте точный origin, а не *, если используете учётные данные.

3. 3

   Обработайте OPTIONS preflight

   Проверьте, что сервер возвращает 204 или 200 на OPTIONS-запрос с заголовками Access-Control-Allow-Methods и Access-Control-Allow-Headers. В Express это делает middleware cors автоматически. В Nginx добавьте add_header Access-Control-Allow-Origin ... и if ($request_method = OPTIONS) { return 204; }.

4. 4

   Используйте прокси при локальной разработке

   Если вы не можете изменить сервер, настройте прокси в инструменте разработки. В Vite: server.proxy в vite.config.js. В Create React App: поле proxy в package.json. Затем вызывайте API по относительному пути (/api/...) вместо полного URL.

5. 5

   Избегайте CORS в продакшене

   Лучшее решение, чтобы фронтенд и API были на одном origin (тот же домен и порт). Если нет, используйте обратный прокси, который перенаправляет /api на бэкенд. Так браузер не отправляет cross-origin запрос.

6. 6

   Проверьте конфигурацию прокси и хостинга

   Если вы используете Nginx, Apache или облачный хостинг, убедитесь, что они не удаляют CORS-заголовки. В Nginx используйте proxy_pass и add_header на правильном уровне. На serverless-платформах (Vercel, Netlify) настройте CORS в заголовках ответа функций или в соответствующей конфигурации.

7. 7

   Тестируйте с помощью curl

   Симулируйте preflight: curl -i -X OPTIONS http://localhost:8080/api/podaci -H "Origin: http://localhost:3000" -H "Access-Control-Request-Method: GET". Проверьте, содержит ли ответ Access-Control-Allow-Origin и Access-Control-Allow-Methods. Если не содержит, проблема на сервере.

8. 8

   Очистите кеш и перезагрузите

   Браузеры могут кешировать preflight-ответы согласно заголовку Access-Control-Max-Age. Дождитесь истечения срока, перезапустите браузер или временно уменьшите это значение на сервере. В DevTools включите "Disable cache" и обновите страницу. Иногда нужно перезапустить сервер разработки, чтобы применились изменения конфигурации.

Если ничего не помогает: продвинутые проверки

Как избежать повторения

• Определите список разрешённых origin в конфигурации сервера и обновляйте его при каждом изменении домена.
• Используйте один origin для фронтенда и API везде, где возможно, или обратный прокси.
• Тестируйте поведение CORS автоматическими тестами или curl перед публикацией.
• Избегайте `*` для `Access-Control-Allow-Origin`, когда используете учётные данные.

Частые вопросы