Как избавиться от ошибки NO ACCESS CONTROL ORIGIN в React. js? - PullRequest
0 голосов
/ 22 апреля 2020

Я пытаюсь получить данные из API, для которого я использовал метод выборки React. js. Но постоянно я вижу эту ошибку

Доступ к выборке в https://api.edamam.com/search?q=chicken&app_id=${APP_ID}&app_key=${APP_KEY} из источника http://localhost:3000 был заблокирован политикой CORS: заголовок «Access-Control-Allow-Origin» отсутствует на запрашиваемый ресурс. Если непрозрачный ответ удовлетворяет вашим потребностям, установите режим запроса 'no-cors', чтобы получить ресурс с отключенным CORS.

У меня отключены расширения и т. Д. c, но я предполагаю, что для этого требуются некоторые дополнительные header et c добавлено в запрос. помогите пожалуйста.

1 Ответ

1 голос
/ 22 апреля 2020

Эта проблема связана не с 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'). Обратите внимание, что вам нужно перезапустить сервер разработки. Вы можете прочитать больше о том, как это работает здесь

...