Reactjs 应用程序获取 api 已被 CORS 阻止，即使在服务器上而不是本地主机上

Question

我正在使用reactjs应用程序，并将其上传到我网站的cpanel上。使用 npm run build 后，我在 localhost:3000 和我的网站域上遇到相同的错误。我正在尝试从跨源网站获取 api。

Access to fetch at 'https://api.binance.com/api/v3/account?recvWindow=20000&timestamp=1603858555542&signature=f2d***' from origin 'https://app.mydomain.com' has been blocked by CORS policy: Request header field x-mbx-apikey is not allowed by Access-Control-Allow-Headers in preflight response.

我尝试将 Express 与 ReactJS 一起使用，但也不起作用。对于本地主机，我可以使用 electrojs 来解决问题。但对于我的网站上已上传的应用程序，我应该做什么？ 这是我用 xmlhttprequest 做的测试：

console.log('test:');
var burl = 'https://api.binance.com';
var dataQueryString = 'recvWindow=20000&timestamp=' + Date.now();
var keys = {
  'akey':'/****/',
  'skey':'/****/',
};
var endPoint = '/api/v3/account';
var signature = CryptoJS.HmacSHA256(dataQueryString, keys['skey']).toString(CryptoJS.enc.Hex);;
var url = burl + endPoint + '?' + dataQueryString + '&signature=' + signature;
var ourRequest = new XMLHttpRequest();
ourRequest.open('GET',url,true);
ourRequest.setRequestHeader('X-MBX-APIKEY',keys['akey']);
ourRequest.onload = function(){
  var ourData = JSON.parse(ourRequest.responseText);
  console.log('ourData:',ourData);
}
ourRequest.send();

Answer 1

在你的 React 应用程序中首先安装

http-proxy-middleware

，然后在根目录中创建一个名为

setupProxy.js

的文件并粘贴以下代码：

const { createProxyMiddleware } = require("http-proxy-middleware");
module.exports = function (app) {
  app.use(
    "/**",
    createProxyMiddleware({
      target: "https://api.binance.com",
      changeOrigin: true,
    })
  );
};