С помощью модуля узла CORS Anywhere
При получении данных API часто встречается ошибка «Нет заголовка Acces-Control-Allow-Origin» в запрошенном ресурсе ». Выглядит это примерно так:
Существует отличное решение для устранения этой ошибки. Ошибка часто возникает при выполнении выборки в API, в котором реализованы ограничения CORS.
Что вы делаете, когда у вас нет контроля над политиками CORS внутреннего сервера?
При изучении документации Access-Control-Allow-Origin кажется, что эту проблему можно решить, просто добавив заголовок с подстановочным знаком:
'Access-Control-Allow-Origin: *'Для запросов без учетных данных буквальное значение
*может быть указано как подстановочный знак; значение указывает браузерам разрешить запрос кода из любого источника для доступа к ресурсу. Попытка использовать подстановочный знак с учетными данными приведет к ошибке.
Получение часто бывает неудачным, и первоначальная ошибка все равно появляется. Если вам удалось безошибочно использовать заголовок с подстановочным знаком, обязательно сообщите о последствиях для безопасности.
Другое решение включает использование подключаемого модуля Chrome, который, если вы сможете заставить его работать с API, не будет подходить для производства, поскольку вы не можете ожидать, что пользователи установят подключаемый модуль браузера для использования основных функций вашего приложения.
Распространенным решением является использование корс-где угодно, добавляя cors-anywhere.herokuapp.com в начало URL-адреса для получения, чтобы создать прокси. Однако это всего лишь пример прокси. Политика допустимого использования Heroku не позволяет развертывать общедоступный прокси-сервер, поэтому конкретная версия прокси-сервера имеет ограничение скорости.
Вы можете использовать тот же самый точный код, чтобы развернуть тот же прокси на локальном сервере и / или разместить его на Heroku, если вы используете его в производстве (в этом случае вы можете занести в белый список URL-адрес своего внешнего приложения, чтобы избежать необходимости следить за скоростью ограничивающее требование).
С помощью cors -where вы можете развернуть собственный прокси-сервер и устранить ошибку всего за несколько минут.
Инструкции по использованию cors-где угодно в приложении React.js
- Установите узловой модуль:
npm i cors-anywhere - Обслуживайте прокси из модуля узла:
cd node_modules/cors-anywhere/lib/ && npm run start. - Вероятно, адрес прокси-сервера
http://localhost:8080. - Добавьте URL-адрес прокси в начало всех URL-адресов, по которым выполняется выборка. Это может выглядеть примерно так:
http://localhost:8080/https://your-api-endpoint...
Теперь ошибка должна быть устранена. Сделайте выборку еще раз, и запрошенные данные будут извлечены по желанию.
Чтобы использовать приложение в производстве, разверните прокси-сервер с помощью Heroku, затем измените URL-адрес прокси (добавленный в начало URL-адреса выборки) на новый URL-адрес развернутого прокси.
« Политика допустимого использования Heroku запрещает использование Heroku для работы с открытым прокси-сервером, поэтому убедитесь, что вы применяете белый список или ограничиваете количество запросов».
В репозитории cors -where GitHub есть инструкции, как это сделать.
Дополнительное упрощение для среды разработки
Настройте прокси-сервер на автоматическое вращение, изменив сценарий start для запуска обеих команд с помощью модуля Одновременно :
npm i concurrently- Измените сценарий запуска в файле package.json на:
“start”: “concurrently \”react-scripts start\” \”cd node_modules/cors-anywhere/lib/ && npm run start\””,
Прокси-сервер теперь загрузится автоматически без дополнительных усилий.
