Почему localhost всё ещё вызывает ошибки CORS
Вы запускаете фронтенд на localhost:3000. Вы запускаете бэкенд на localhost:5000. Оба приложения работают на вашем ноутбуке. И всё же вы видите ошибку CORS.
Это происходит из-за того, как браузеры определяют источник (origin).
Источник (origin) состоит из трёх частей:
- Протокол
- Домен
- Порт
Сравните эти два адреса:
У них одинаковый протокол. У них одинаковый домен. Но они используют разные порты.
Браузеры воспринимают разные порты как разные источники.
Когда ваше React-приложение вызывает API, браузер видит кросс-доменный запрос (cross-origin request). Он рассматривает их как две отдельные сущности.
Почему существует это правило? Безопасность.
Если бы веб-сайты могли свободно вызывать любые API, вредоносный сайт мог бы:
- Считать ваши банковские данные.
- Получить доступ к приватным API.
- Действовать от вашего имени.
Браузеры используют политику единого источника (Same-Origin Policy), чтобы предотвратить это. Сайт А не может получить доступ к Сайту Б, если Сайт Б не даст на это разрешение.
CORS расшифровывается как Cross-Origin Resource Sharing. Это способ, с помощью которого ваш сервер сообщает браузеру: «Я доверяю запросам с этого конкретного источника».
Вы исправляете это, добавив заголовок в ваш бэкенд: Access-Control-Allow-Origin: http://localhost:3000
Это сообщает браузеру, что запрос безопасен.
Распространенная причина путаницы: Вы видите в логах бэкенда, что запрос прошел, но фронтенд выдает ошибку.
Это происходит потому, что:
- Фронтенд отправляет запрос.
- Бэкенд успешно получает запрос.
- Бэкенд успешно отправляет ответ.
- Браузер получает ответ и блокирует его из-за правил безопасности.
Эта ошибка — функция безопасности браузера.
Такие инструменты, как Postman или cURL, работают, потому что они не являются браузерами. Они не применяют политики безопасности браузера.
Браузер игнорирует тот факт, что оба приложения находятся на вашей машине. Его интересует только источник (origin).