我使用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中的请求也不起作用?谢谢!
CORS是 浏览器 功能。服务器需要选择加入CORS,以允许浏览器绕过同源策略。您的服务器将没有相同的限制,并且能够使用公共API向任何服务器发出请求。https://developer.mozilla.org/zh- CN/docs/Web/HTTP/Access_control_CORS
在启用了CORS的服务器上创建可以充当Web应用程序代理的终结点。