Что такое CORS и почему браузер блокирует запрос с фронтенда на другой домен, даже если backend отвечает корректным JSON?

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

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

Как это работает подробнее

Браузер сравнивает origin (схема+домен+порт) страницы и запрашиваемого ресурса; если они различаются, для «небезопасных» запросов сначала отправляется preflight-запрос методом OPTIONS, и только при наличии правильных CORS-заголовков в ответе браузер разрешает JS-коду получить доступ к телу ответа.

Пример кода

request.httpКопировать

HTTP/1.1 200 OK
Access-Control-Allow-Origin: https://app.example.com
Access-Control-Allow-Methods: GET, POST
Access-Control-Allow-Headers: Authorization, Content-Type
# Preflight OPTIONS-запрос браузер отправит автоматически перед основным
# запросом с методом PUT/DELETE или нестандартными заголовками

Что использовать на практике

• Практика. Сам факт блокировки CORS не защищает сервер от прямых запросов (curl, другой сервер) — это защита именно браузерных сценариев от чтения чужих данных чужим JS-кодом; backend должен явно настроить разрешённые origin, методы и заголовки, а не использовать * вместе с credentials.

Подводные камни

• Риск. Путают CORS с общей защитой API и считают, что настройка CORS защищает от неавторизованных вызовов; ставят Access-Control-Allow-Origin: * вместе с Access-Control-Allow-Credentials: true, что браузеры вообще запрещают.