При разработке веб-сайта / веб-приложения на локальном хосте, которое отправляет запросы на другой сервер, вы можете столкнуться с проблемами 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) - запустить его с отключенной веб-безопасностью.
- Принудительно выйти из Chrome, перейдя в меню Mac и нажав «принудительный выход» (или нажав команду Q).
- Затем выполните эту команду, чтобы открыть 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 в меню разработки.
- Включите меню разработки, выбрав Настройки ›Дополнительно.
- Затем выберите «Отключить ограничения перекрестного происхождения» в меню разработки.
После завершения разработки перезапустите 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, не будет проблемой).
Если вы нашли это полезным, у вас есть вопросы или вы хотите получить больше подобного контента, не стесняйтесь подписывайтесь на меня в твиттере!