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

#39;Access-Control-Allow-Origin#39; issue when API call made from React (Isomorphic app)(从 React(同构应用程序)进行 API 调用时出现“Access-Control-Allow-Origin问题)

问题描述

我在使用 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 的端点，该端点可以充当您的 Web 应用程序的代理.

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

这篇关于从 React(同构应用程序)进行 API 调用时出现“Access-Control-Allow-Origin"问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！