从 React(同构应用程序)进行 API 调用时的“访问控制允许来源"问题 [英] 'Access-Control-Allow-Origin' issue when API call made from React (Isomorphic app)

问题描述

我在使用 React 和 Express 的同构 JavaScript 应用程序中遇到了问题.

I'm running into an issue with my isomorphic JavaScript app using React and Express.

当我的组件挂载时，我正在尝试使用 axios.get 发出 HTTP 请求

I am trying to make an HTTP request with axios.get when my component mounts

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，但我没有获得任何响应数据并且在我的控制台中出现错误

I am getting a status 200 res from the API, but I am not getting any response data and getting an error in my console

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 中发出请求

However, if I make the request in my 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 中的请求也不起作用?谢谢！

It works fine and I get response data when the server starts. Is this an issue with the actual API or am I doing something wrong? If this was a CORS issue I'm guessing the request in server.js wouldn't work either? Thanks!

推荐答案

CORS 是一个浏览器功能.服务器需要选择加入 CORS 以允许浏览器绕过同源策略.您的服务器不会有同样的限制，并且能够向任何具有公共 API 的服务器发出请求.https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS

CORS is a browser feature. Servers need to opt into CORS to allow browsers to bypass same-origin policy. Your server would not have that same restriction and be able to make requests to any server with a public API. https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS

在您的服务器上创建一个启用 CORS 的端点，作为您的网络应用的代理.

Create an endpoint on your server with CORS enabled that can act as a proxy for your web app.

这篇关于从 React(同构应用程序)进行 API 调用时的“访问控制允许来源"问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！