it-roy-ru.com

Проблема «Access-Control-Allow-Origin» возникает при вызове API из React (изоморфное приложение)

У меня проблема с моим изоморфным приложением JavaScript, использующим React и ​​Express.

Я пытаюсь сделать HTTP-запрос с axios.get, когда мой компонент монтируется

componentDidMount() {
  const url = 'http://ufc-data-api.ufc.com/api/v3/iphone/fighters/title_holders';
  axios.get(url).then( res => {
    //use res to update current state
  })
}

Я получаю статус 200 res от API, но я не получаю никаких данных ответа и получаю сообщение об ошибке в моей консоли

XMLHttpRequest cannot load http://ufc-data-api.ufc.com/api/v3/iphone/fighters/title_holders. 
No 'Access-Control-Allow-Origin' header is present on the requested resource. 
Origin 'http://localhost:3000' is therefore not allowed access.

Тем не менее, если я сделаю запрос в моем server.js

const url = 'http://ufc-data-api.ufc.com/api/v3/iphone/fighters/title_holders';
axios.get(url).then(res => {
    //console.log(res);
});

Он работает нормально, и я получаю данные ответа при запуске сервера. Это проблема с настоящим API или я что-то не так делаю? Если бы это была проблема с CORS, я думаю, запрос в server.js тоже не сработал бы? Спасибо!

15
Scott Davidson

CORS - это функция browser. Серверы должны включить CORS, чтобы браузеры могли обходить политику одного источника. Ваш сервер не будет иметь такого же ограничения и сможет отправлять запросы на любой сервер с открытым API. https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS

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

13
azium

Используйте расширение Google Chrome, которое называется Allow-Control-Allow-Origin: * . Он изменяет заголовки CORS на лету в вашем приложении.

16
Colleen Purcell

Я думаю, что ответ на ваш вопрос здесь

Чтобы Chrome отправлял Access-Control-Allow-Origin в заголовке, просто добавьте псевдоним вашего локального хоста в файле/etc/hosts к другому домену, например:

127.0.0.1 localhost yourdomain.com

1
Pablo Darde

Я не знаю, поможет ли это, но я получал ту же ошибку при удаленной отладке собственного приложения. Я запускал отладчик в 192.168.x.x: 8081. Я прочитал немного об этом Обмен ресурсами между источниками (CORS) чтобы узнать, что такое CORS. (Я новичок) и изменил мой URL с IP: 8081 на localhost: 8081, и моя проблема была решена.

0
Mingina

У меня такая же проблема. другие ответы верны, но есть другое решение . вы можете установить заголовок ответа, чтобы разрешить доступ к другим источникам . согласно этому сообщению вы должны добавить следующие коды перед любым вызовом app.get :

app.use(function(req, res, next) {
  res.header("Access-Control-Allow-Origin", "*");
  res.header("Access-Control-Allow-Headers", "X-Requested-With");
  next();
  });

это сработало для меня :)

0
arash nadali

Поскольку на сервере нет заголовка CORS, вы не можете получить ответ.

Это заголовок API, который я получил из браузера Chrome:

Age:28
Cache-Control:max-age=3600, public
Connection:keep-alive
Date:Fri, 06 Jan 2017 02:05:33 GMT
ETag:"18303ae5d3714f8f1fbcb2c8e6499190"
Server:Cowboy
Status:200 OK
Via:1.1 vegur, 1.1 e01a35c1b8f382e5c0a399f1741255fd.cloudfront.net (CloudFront)
X-Amz-Cf-Id:GH6w6y_P5ht7AqAD3SnlK39EJ0PpnignqSI3o5Fsbi9PKHEFNMA0yw==
X-Cache:Hit from cloudfront
X-Content-Type-Options:nosniff
X-Frame-Options:SAMEORIGIN
X-Request-Id:b971e55f-b43d-43ce-8d4f-aa9d39830629
X-Runtime:0.014042
X-Ua-Compatible:chrome=1
X-Xss-Protection:1; mode=block

Нет заголовка CORS в заголовках ответа.

0
Nguyen Thanh