Проблема «Access-Control-Allow-Origin» при вызове API из React (Isomorphic app)

У меня возникает проблема с моим изоморфным приложением JavaScript с использованием React и Express.Проблема «Access-Control-Allow-Origin» при вызове API из React (Isomorphic app)

Я пытаюсь сделать запрос 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 разрешения от 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 тоже не будет работать? Благодаря!

источник

2017-01-06 Scott Davidson

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

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

источник

2017-01-06 02:10:19 azium

Безопасность @Todd всегда должна быть перед удобством. К счастью, прокси-серверы могут занимать 5 минут. Кроме того, существуют прокси-сервисы, которые уже используют этот тип функций, но позволяют только так много бесплатных запросов. Настройка собственного прокси-сервера стоит крайне минимальных усилий. – azium

Поскольку сервер не имеет заголовка 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 заголовка в заголовках ответа.

источник

2017-01-06 02:08:54

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

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

127.0.0.1 локальный yourdomain.com

источник

2017-01-06 02:13:01

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

источник

2017-03-22 00:28:21

Проблема «Access-Control-Allow-Origin» при вызове API из React (Isomorphic app)

ответ

Смежные вопросы