При разработке веб-сайта / веб-приложения на локальном хосте, которое отправляет запросы на другой сервер, вы можете столкнуться с проблемами Cross Origin Resource Sharing (CORS). Я не буду вдаваться в подробности о том, что такое CORS, в этом посте. Все, что я скажу, это то, что CORS существует из соображений безопасности, но когда вы разрабатываете локально, это может быть проблемой! Подробнее о CORS в документации MDN.

Я написал это простое руководство, чтобы объяснить основные решения для отключения ограничений перекрестного происхождения на локальном хосте (и, следовательно, исправления любых ошибок CORS при разработке вашего приложения локально), которые я объясню более подробно ниже.

1. Используйте настройку прокси в приложении Create React.

Приложение Create React поставляется с настройкой конфигурации, которая позволяет вам просто проксировать запросы API в разработке. Это доступно в [email protected]. Для этого добавьте настройку прокси в свой package.json следующим образом

"proxy": "https://cat-fact.herokuapp.com/",

Теперь, когда вы делаете запрос API к https://localhost:3000/api/facts, Create React App будет проксировать запрос API на https://cat-fact.herokuapp.com/facts, и ошибка CORS будет устранена.

Это действительно простое решение, которое может не работать в более сложных ситуациях, когда задействовано несколько API или требуются определенные типы аутентификации API.

2. Отключите CORS в браузере.

Вы можете напрямую отключить CORS в браузере. Если вы это сделаете, имейте в виду, что вы отключаете ограничения безопасности, на которые есть причина. Я бы не рекомендовал просматривать веб-страницы с отключенным CORS; Просто отключите его при разработке своего веб-сайта / приложения.

Chrome (на Mac):

Самый надежный способ отключить CORS в последней версии Chrome на Mac (протестирован на v84) - запустить его с отключенной веб-безопасностью.

  1. Принудительно выйти из Chrome, перейдя в меню Mac и нажав «принудительный выход» (или нажав команду Q).
  2. Затем выполните эту команду, чтобы открыть Chrome с отключенной веб-безопасностью.
open -n -a /Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome — args — user-data-dir=”/tmp/chrome_dev_test” — disable-web-security

По завершении разработки перезапустите Chrome, и он вернется в нормальное состояние.

Firefox:

Самый простой и надежный способ отключить CORS в Firefox - это установить подключаемый модуль CORS Everywhere.

Safari:

Самый простой и надежный способ использовать CORS в Safari - отключить CORS в меню разработки.

  1. Включите меню разработки, выбрав Настройки ›Дополнительно.
  2. Затем выберите «Отключить ограничения перекрестного происхождения» в меню разработки.

После завершения разработки перезапустите Safari, и все вернется в нормальное состояние.

3. Используйте прокси, чтобы избежать ошибок CORS.

Наконец, вы можете использовать прокси типа корс-где угодно.

Если вы хотите легко демонстрировать корс где угодно, Роб - W установил общедоступную демонстрацию, которая отлично подходит для использования общедоступных API, поскольку не требует регистрации или настройки https://cors-anywhere.herokuapp.com. Поскольку это всего лишь демонстрация, количество запросов ограничено.

Чтобы использовать общедоступную демонстрацию cors -where, просто добавьте URL-адрес, на который вы хотите сделать запрос, после домена, например. Https://cors-anywhere.herokuapp.com/https://cat-fact.herokuapp.com/facts (* если вы посмотрите это в браузере, вы можете получить сообщение об отсутствии заголовка запроса. запрос API, использующийся в вашем приложении с использованием чего-то вроде Axios или Fetch, не будет проблемой).

Если вы нашли это полезным, у вас есть вопросы или вы хотите получить больше подобного контента, не стесняйтесь подписывайтесь на меня в твиттере!