Reactjs应用程序获取api甚至在服务器而非本地主机上都已被内核阻止

如何解决Reactjs应用程序获取api甚至在服务器而非本地主机上都已被内核阻止

我正在使用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一起使用，但是它也没有用。对于本地主机，我可以使用electronjs解决该问题。但是对于已经上传到我网站上的我的应用程序，我该怎么办？ 这是我对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();

解决方法

在您的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,})
  );
};