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

IT技术 javascript node.js reactjs axios cors
2021-02-27 15:12:00

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

6个回答

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

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

我在这里问过问题，请看一下stackoverflow.com/questions/51701630/...
2021-04-16 15:12:00
我有同样的问题，我已经阅读了你上面提到的文档仍然不了解 CORS 你能详细说明一下吗？
2021-04-18 15:12:00
@Todd 安全性应该始终放在方便之前。幸运的是，配置代理服务器只需 5 分钟即可完成。此外，还有一些代理服务已经公开了这种类型的功能，但只允许如此多的免费请求。设置您自己的代理值得付出极少的努力。
2021-04-21 15:12:00
我有同样的问题。在我的情况下，我可以从台式计算机网络浏览器创建记录，但不能通过我的 iPhone 网络浏览器创建。
2021-05-01 15:12:00
@SagarGautam 你能提出一个新的 stackoverflow 问题并提及你理解有困难的所有内容，然后在这里评论你的帖子的链接吗？我很乐意回答
2021-05-03 15:12:00

使用名为Allow-Control-Allow-Origin: *的谷歌 Chrome 扩展程序。它会在您的应用程序中动态修改 CORS 标头。

仅将其用于测试目的。您的用户不会在他们的浏览器上启用插件来使用您的网站
2021-04-17 15:12:00
它也可用于 Firefox。
2021-05-16 15:12:00

在不使用外部代理或 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. 更改客户端（React）调用代理获取数据，不会出现CORS错误（只需更改url中的端口即可）：

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

  2. 运行节点项目node app.js和react项目npm start。

我有同样的问题。其他答案是正确的，但还有另一种解决方案。您可以设置响应头以允许跨域访问。根据这篇文章，您必须在任何 app.get 调用之前添加以下代码：

app.use(function(req, res, next) {
  res.header("Access-Control-Allow-Origin", "*");
  res.header("Access-Control-Allow-Headers", "X-Requested-With");
  next();
  });

这对我有用:)

        //install cors using terminal/command  
        $ npm install cors

        //If your using express in your node server just add
        var cors = require('cors');
        app.use(cors())


       //and re-run the server, your problem is rectified][1]][1]
       **If you won't be understood then see below image**

https://i.stack.imgur.com/Qeqmc.png

其它你可能感兴趣的问题
上一篇在 JavaScript 中更改输入和提交表单的值 下一篇Webpack 和外部库