reactjs - 请求 CORS 错误，配置了 header 和 webpack-dev-server 代理

Question

我最近几天一直在设计一个简单的 ReactJS+Typescript 应用程序(与 Webpack 捆绑在一起)。现在，我开始了后端连接部分(不是我的领域，也不是我在这种情况下的责任)，我遇到了一些困难。主要问题是浏览器上的 CORS 错误。这是我的设置:

    "webpack": "^4.30.0",
    "webpack-dev-server": "^3.3.1",
    "typescript": "^3.4.5",
    "react": "^16.8.6",
    "axios": "^0.18.0",
    Chrome version 74.0.3729.131 (64-bit)

没有任何类型的建议或实验，这是我遇到的错误:

我已经尝试了一些方法来解决这个问题，但没有一个真正解决了这个问题。它们如下:

1. 在我的 webpack.dev.ts 配置文件中，我配置了 webpack 代理属性。我是这样配置的:

  devServer: {
    contentBase: path.join(__dirname, process.env.PUBLIC_PATH || '../dist'),
    compress: true,
    host: process.env.DEV_HOST || 'localhost',
    port: process.env.DEV_PORT || 8000,
    open: 'chrome',
    proxy: {
      '/api': {
        target: 'http://<ip>:8888',
        secure: false,
      },
    },
    headers: {
        'Access-Control-Allow-Origin': '*',
        'Access-Control-Allow-Headers': '*',
        'Access-Control-Allow-Methods': '*',
    },
  },

对后端的请求构建如下:

const config = {
  method: 'post',
  url: '/api/login',
  data: { password: password },
};
axios(config)
  .then(resp => console.log(resp))
  .catch(error => console.log(error));

请注意，目前，password 字段只是一个占位符，不会在后端进行验证，因此 Access-Control-Allow-Credentials 标题不是必需的。

令我非常失望的是，该请求似乎没有使用配置的代理，因为这是错误:

在网络选项卡上，也没有提及后端 IP 地址。请注意，只有在这种情况下，请求才会显示为 POST 而不是 OPTIONS 请求。

1. 尝试在我这边(客户端)使用 CORS 控制所需的 header 配置 axios。这也没有带来任何解决方案。这是我想出的:

const config = {
  method: 'post',
  url: 'http://<ip>:8888/api/login',
  data: { password: password },
  headers: {
    'Access-Control-Allow-Origin': '*',
    'Access-Control-Allow-Headers': '*',
    'Access-Control-Allow-Methods': '*',
  },
};
axios(config)
  .then(resp => console.log(resp))
  .catch(error => console.log(error));

出现的结果与没有任何配置的结果相似(此处附上第一张图片)。

1. 最后，我为 CORS 安装了一个 Chrome 扩展，(我想)将 Access-Control-Allow-Origin: * header 附加到所有请求。这就是事情变得有趣/奇怪的地方。在此扩展程序处于事件状态(并且未对其进行配置)的情况下，即使我禁用了所有其他先前的选项，错误也会发生变化:

我也尝试过同时激活所有三个之前的选项，最后一个错误就是出现的。

我不确定下一步该去哪里，或者如何从这里开始。我正在避免请求更改服务器 API 的 header ，但作为最后的手段，我会保留该选项。

我已尝试对解释和我想要实现的目标进行彻底的解释，但请随时索取更多信息。

提前致谢。

Answer 1

毕竟，在收到预检 (OPTIONS) 请求时，我别无选择，只能用几个 header 更新后端:

• Access-Control-Allow-Headers，其中包含请求在同一 header 上的任何内容；
• Access-Control-Allow-Origin，设置为*。由于在生产中，前端和后端都是本地的，这只会用于我们的开发环境；
• Access-Control-Allow-Methods，为方便起见，设置为 *。我们可以指定在我们允许的域上允许哪些方法，但我们认为这对于开发环境来说不是必需的。

设置这些标志后，我在 Webpack 上设置了代理配置，如下所示:

    proxy: {
      '/api': {
        target: 'http://<ip>:8888',
        secure: false,
      },
    },
    headers: {
        'Access-Control-Allow-Origin': '*',
        'Access-Control-Allow-Headers': '*',
        'Access-Control-Allow-Methods': '*',
    },

重新测试我们的请求，一切顺利。我们发现无法仅在客户端执行此操作。

谢谢大家的意见。