如何克服ReactJS中的CORS问题

小编典典

如何克服ReactJS中的CORS问题

reactjs

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

const response = axios({
   method: 'post',
   dataType: 'jsonp',
   url: 'https://awww.api.com',
   data: {
    'appToken':'',
    'request':{ 
        'applicationName':'ddfdf', 
        'userName':'[email protected]', 
        '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'
 },
 };

阅读 694

2020-07-22

共1个答案

小编典典

理想的方法是向服务器添加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;
    }
}

这my-website.com将是可访问代码的网站的最终名称（代理网站的名称）。以这种方式配置nginx之后。您将需要修改请求，以便：

所有API调用均从更改my-server.com/<API-path>为my-website.com/server/<API-path>

如果您不熟悉nginx，我建议您仔细阅读本文档。

简要解释上面的配置中发生了什么：

在upstream小号定义实际的服务器向谁请求将被重定向
该server块用于定义nginx服务器的实际行为。
如果有多个服务器块，server_name则用于标识将用于处理当前请求的块。
在error_log和access_log指令用于定义日志文件的位置（用于调试）
这些location块定义了不同类型的请求的处理：
1. 第一个位置块处理所有以/所有这些请求开头的请求，这些请求均被重定向到客户端
2. 第二个位置块处理所有以开头的请求/server/<API-path>。我们将所有此类请求重定向到服务器。

注意：/server此处用于区分客户端请求和服务器端请求。由于域相同，因此没有其他区分请求的方法。请记住，没有这样的约定可以强迫您/server在所有此类用例中添加。可以将其更改为任何其他字符串，例如。/my- server/<API-path>，/abc/<API-path>等等。

即使此技术可以解决问题，但我还是强烈建议您向服务器添加CORS支持，因为这是应对此类情况的理想方法。

如果您希望在开发时避免做所有这些事情，可以使用此
chrome扩展程序。它应该允许您在开发期间执行跨域请求。

2020-07-22