如何克服ReactJS中的CORS问题

Question

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

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

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",
  },
};

Answer 1

通过名为CORS的chrome插件临时解决此问题。顺便说一句，后端服务器必须向前端请求发送正确的标头。

Answer 2

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

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

CORS问题还有另一个黑客工作。您必须使用nginx服务器部署代码，作为服务器和客户端的代理。将使我们陷入困境的事情proxy_pass指令。配置您的nginx服务器，以便处理您的特定请求的位置块将proxy_pass或将您的请求重定向到您的实际服务器。CORS 问题通常是由于网站域中的更改而发生的。当您有一个单独的代理作为客户端和服务器的面孔时，浏览器就会被愚弄，认为服务器和客户端位于同一域中。因此，没有CORS。

考虑这个例子。

您的服务器是< code>my-server.com，您的客户端是< code>my-client.com，请按如下方式配置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以这种方式配置。您需要修改请求，以便：

< li >所有API调用都从< code>my-server.com/

如果你不熟悉nginx，我建议你浏览一下文档。

为了简单解释上述配置中发生的情况：

• 上游定义了请求将重定向到的实际服务器。
• 服务器块用于定义nginx服务器的实际行为
• 如果有多个服务器块，server_name用于标识将用于处理当前请求的块
• error_log和access_log指令用于定义日志文件的位置（用于调试）
• 位置块定义了不同类型请求的处理：
  1. 第一个位置块处理以＜code＞/＜/code＞开头的所有请求。所有这些请求都被重定向到客户端。＜/li＞
  2. 第二个位置块处理从＜code＞/server开始的所有请求/

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

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

如果你想避免在开发时做这些事情，你可以使用这个chrome扩展。它应该允许您在开发过程中执行跨域请求。

Answer 3

我从“TraversyMedia”教程中发现的最简单的方法是在“axios”或“get ch”api中使用https://cors-anywhere.herokuapp.com

https://cors-anywhere.herokuapp.com/{type_your_url_here} 

例如。

axios.get(`https://cors-anywhere.herokuapp.com/https://www.api.com/`)

在您的情况下，将url编辑为

url: 'https://cors-anywhere.herokuapp.com/https://www.api.com',