从 React（同构应用程序）进行 API 调用时出现“Access-Control-Allow-Origin”问题

Question

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

原文由 Scott Davidson 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

在您的服务器上创建一个启用了 CORS 的端点，该端点可以充当您的 Web 应用程序的代理。

原文由 azium 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

在不使用外部代理或 Chrome 扩展程序的情况下修复

应在服务器端启用 CORS！如果您无法在服务器上激活它（例如使用外部 API）创建一个中间件 React -> Middleware -> Orginal Server 。

1. 创建一个 Node.js 项目（中间件）并在 app.js 中使用以下代码。

    const express = require("express");
   var cors = require('cors')
   const app = express();
   app.use(cors());
   const { createProxyMiddleware } = require('http-proxy-middleware');
   app.use('/api', createProxyMiddleware({
       target: 'http://localhost:8080/', //original url
       changeOrigin: true,
       //secure: false,
       onProxyRes: function (proxyRes, req, res) {
          proxyRes.headers['Access-Control-Allow-Origin'] = '*';
       }
   }));
   app.listen(5000);

这会将请求 http://localhost:5000/api/xxx 传递给原始服务器（例如 http://localhost:8080/api/xxx ），并将结果返回给客户端。

1. 改client（React）调用proxy获取数据不报CORS错误（只需要改url中的端口）：

    axios.get('http://localhost:5000/api/xxx', //proxy uri
   {
      headers: {
         authorization: ' xxxxxxxxxx' ,
         'Content-Type': 'application/json'
      }
   }).then(function (response) {
      console.log(response);
   });

1. 运行节点项目 node app.js 并反应项目 npm start 。

原文由 alireza ranjbaran 发布，翻译遵循 CC BY-SA 4.0 许可协议