Эта проблема связана не с React, а с CORS. Из документации
Cross-Origin Resource Sharing (CORS) is a mechanism that uses additional HTTP headers to tell browsers to give a web application running at one origin, access to selected resources from a different origin. A web application executes a cross-origin HTTP request when it requests a resource that has a different origin (domain, protocol, or port) from its own.
Эта проблема должна быть исправлена на стороне сервера. Это не запрос в заголовке, который нужно добавить, а запрос в ответе. В частности, вам нужно добавить Access-Control-Allow-Origin
.
Чтобы понять, почему существует CORS, подумайте, что я создаю веб-сайт, который может отправлять сетевые запросы в Gmail от вашего имени. Это позволяет мне читать ваши письма. Это предотвращается браузером, поэтому только Gmail может читать из Gmail.
Возможны и другие варианты решения вашей проблемы, в зависимости от того, с каким API вы пытаетесь установить связь, какие у вас настройки и какие ограничения вы используете. иметь. Если вы используете create-react-app
, можно быстро добавить это в package.json
:
"proxy": "https://api.edamam.com",
Теперь удалите https://api.edamam.com
из вызовов извлечения. Поэтому вместо fetch('https://api.edamam.com/path/to/server')
вам нужно сделать fetch('/path/to/server')
. Обратите внимание, что вам нужно перезапустить сервер разработки. Вы можете прочитать больше о том, как это работает здесь