从React（同构应用程序）进行API调用时的“访问-控制-允许-起源”问题

Question

我在使用React和Express的同构JavaScript应用程序时遇到了一个问题。

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

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.

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中的请求也不起作用？谢了！

Answer 1

CORS是一个浏览器特性。服务器需要选择进入CORS，以允许浏览器绕过同源策略。您的服务器将没有相同的限制，并且能够向任何具有公共API的服务器发出请求。https://developer.mozilla.org/en-us/docs/web/http/access_control_cors

在启用CORS的服务器上创建一个endpoint，该endpoint可以充当web应用程序的代理。