如何克服ReactJS中的CORS问题

Z时代
2024-01-10
分类：问答

我正在尝试通过React应用程序中的Axios进行API调用，但是我在浏览器中遇到了CORS问题。我想知道我是否可以从客户端解决此问题，因为我内部没有对API的任何访问权。附加的是我的代码。

const response = axios({
   method: 'post',
   dataType: 'jsonp',
   url: 'https://awww.api.com',
   data: {
    'appToken':'',
    'request':{ 
        'applicationName':'ddfdf', 
        'userName':'jaime@dfd.com', 
        'password':'dfd', 
        'seasonIds':[1521ddfdfd5da02] 
     }
     }
    });
   return{
    type:SHARE_REVIEW,
    payload:'response'
 }
 }

附件是我的WebPack.config.js

module.exports = {
entry: [
'./src/index.js'
 ],
output: {
  path: __dirname,
  publicPath: '/',
  filename: 'bundle.js'
},
module: {
 loaders: [{
  exclude: /node_modules/,
  loader: 'babel',
  query: {
    presets: ['react', 'es2015', 'stage-1']
  }
 },
 { test: /\.json$/, loader: "json-loader"}]
  },
 resolve: {
  extensions: ['', '.js', '.jsx']
 },
devServer: {
historyApiFallback: true,
contentBase: './'
},
node: {
 dns: 'mock',
 net: 'mock'
 },
 };

回答：

理想的方法是向服务器添加CORS支持。

您也可以尝试使用单独的jsonp模块。据我所知axios不支持jsonp。因此，我不确定您使用的方法是否符合有效的jsonp请求。

对于CORS问题，还有其他解决方法。您将必须使用作为服务器和客户端代理的nginx服务器部署代码。可以欺骗我们的是proxy_pass指令。以某种方式配置nginx服务器，以便处理您的特定请求的位置块将proxy_pass或将您的请求重定向到实际服务器。由于网站域的更改，通常会发生CORS问题。当您有一个单独的代理充当客户端和服务器的角色时，浏览器会被愚弄为服务器和客户端位于同一个域中。Ergo

no CORS。

考虑这个例子。

您的服务器为my-server.com，客户端为my-client.com Configure nginx，如下所示：

// nginx.conf
upstream server {
    server my-server.com;
}
upstream client {
    server my-client.com;
}
server {
    listen 80;
    server_name my-website.com;
    access_log /path/to/access/log/access.log;
    error_log /path/to/error/log/error.log;
    location / {
        proxy_pass http://client;
    }
    location ~ /server/(?<section>.*) {
        rewrite ^/server/(.*)$ /$1 break;
        proxy_pass http://server;
    }
}