如何克服 ReactJS 中的 CORS 问题 [英] How to overcome the CORS issue in ReactJS

问题描述

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

I am trying to make an API call through Axios in my React Application. However, I am getting this CORS issue on my browser. I am wondering if i can resolve this issue from a client side as i dont have any access to the API internally. Attached is my code.

const response = axios({
  method: "post",
  dataType: "jsonp",
  url: "https://awww.api.com",
  data: {
    appToken: "",
    request: {
      applicationName: "ddfdf",
      userName: "[e-mail]",
      password: "dfd",
      seasonIds: [1521ddfdfd5da02],
    },
  },
});

return {
  type: SHARE_REVIEW,
  payload: "response",
};

附件是我的 WebPack.config.js

Attached is my 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 支持.

The ideal way would be to add CORS support to your server.

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

You could also try using a separate jsonp module. As far as I know axios does not support jsonp. So I am not sure if the method you are using would qualify as a valid jsonp request.

对于 CORS 问题，还有另一种骇人听闻的解决方法.您必须使用 nginx 服务器部署您的代码，作为您的服务器和客户端的代理.可以通过 proxy_pass 指令来解决问题的东西.以这样的方式配置您的 nginx 服务器，以便处理您的特定请求的位置块将 proxy_pass 或将您的请求重定向到您的实际服务器.CORS 问题通常是由于网站域的变化而发生的.当您有一个单独的代理作为客户端和服务器的面孔时，浏览器会误以为服务器和客户端驻留在同一个域中.因此没有 CORS.

There is another hackish work around for the CORS problem. You will have to deploy your code with an nginx server serving as a proxy for both your server and your client. The thing that will do the trick us the proxy_pass directive. Configure your nginx server in such a way that the location block handling your particular request will proxy_pass or redirect your request to your actual server. CORS problems usually occur because of change in the website domain. When you have a singly proxy serving as the face of you client and you server, the browser is fooled into thinking that the server and client reside in the same domain. Ergo no CORS.

考虑这个例子.

您的服务器是 my-server.com 而您的客户端是 my-client.com配置nginx如下:

Your server is my-server.com and your client is my-client.com Configure nginx as follows:

// 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.您将需要修改请求，以便:

Here my-website.com will be the resultant name of the website where the code will be accessible (name of the proxy website). Once nginx is configured this way. You will need to modify the requests such that:

• 所有 API 调用都从 my-server.com/ 更改为 my-website.com/server/

如果您不熟悉 nginx，我建议您阅读文档.

In case you are not familiar with nginx I would advise you to go through the documentation.

简要说明上述配置中发生的事情:

To explain what is happening in the configuration above in brief:

• 上游定义了请求将被重定向到的实际服务器
• server 块用于定义 nginx 服务器的实际行为.
• 如果有多个服务器块，server_name 用于标识将用于处理当前请求的块.
• error_log 和 access_log 指令用于定义日志文件的位置(用于调试)
• location 块定义了对不同类型请求的处理:

• The upstreams define the actual servers to whom the requests will be redirected
• The server block is used to define the actual behaviour of the nginx server.
• In case there are multiple server blocks the server_name is used to identify the block which will be used to handle the current request.
• The error_log and access_log directives are used to define the locations of the log files (used for debugging)
• The location blocks define the handling of different types of requests:

1. 第一个位置块处理所有以 / 开头的请求，所有这些请求都被重定向到客户端
2. 第二个位置块处理所有以 /server/ 开头的请求.我们会将所有此类请求重定向到服务器.

1. The first location block handles all requests starting with / all these requests are redirected to the client
2. The second location block handles all requests starting with /server/<API-path>. We will be redirecting all such requests to the server.

注意:这里的/server是用来区分客户端请求和服务器端请求的.由于域相同，因此没有其他方法可以区分请求.请记住，没有这样的约定迫使您在所有此类用例中添加 /server.它可以更改为任何其他字符串，例如./my-server/、/abc/等

Note: /server here is being used to distinguish the client side requests from the server side requests. Since the domain is the same there is no other way of distinguishing requests. Keep in mind there is no such convention that compels you to add /server in all such use cases. It can be changed to any other string eg. /my-server/<API-path>, /abc/<API-path>, etc.

尽管这种技术应该可以解决问题，但我强烈建议您向服务器添加 CORS 支持，因为这是处理此类情况的理想方式.

Even though this technique should do the trick, I would highly advise you to add CORS support to the server as this is the ideal way situations like these should be handled.

如果您希望在开发时避免执行所有这些操作，您可以使用 这个 chrome 扩展.它应该允许您在开发过程中执行跨域请求.

If you wish to avoid doing all this while developing you could for this chrome extension. It should allow you to perform cross domain requests during development.

这篇关于如何克服 ReactJS 中的 CORS 问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！