一尘不染

从React(同构应用)进行API调用时出现'Access-Control-Allow-Origin'问题

node.js

我使用React和Express的同构JavaScript应用程序遇到问题。

我正在尝试在组件装入时使用axios.get发出HTTP请求

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
  })
}

我从API获取状态为200 res,但是没有收到任何响应数据并且控制台中出现错误

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中的请求也不起作用?谢谢!


阅读 547

收藏
2020-07-07

共1个答案

一尘不染

CORS是 浏览器
功能。服务器需要选择加入CORS,以允许浏览器绕过同源策略。您的服务器将没有相同的限制,并且能够使用公共API向任何服务器发出请求。https://developer.mozilla.org/zh-
CN/docs/Web/HTTP/Access_control_CORS

在启用了CORS的服务器上创建可以充当Web应用程序代理的终结点。

2020-07-07