请求时发生 CORS 错误，配置了标头和 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请求。

2. 尝试axios在我这边（客户端）配置 CORS 控制所需的标头。这也没有带来任何解决方案。这就是我想出的：

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));

出现的结果与没有任何配置的结果类似（此处附有第一张图片）。

3. 最后，我安装了一个 CORS 的 Chrome 扩展，（我想）它将Access-Control-Allow-Origin: *标头附加到所有请求。这就是事情变得有趣/奇怪的地方。当此扩展处于活动状态（并且无需配置它）时，即使我禁用所有其他先前选项，错误也会更改：

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

我不知道下一步该去哪里，或者如何从这里继续。我避免请求更改服务器 API 的标头，但我保留该选项打开作为最后的手段。

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

提前致谢。

Answer 1

毕竟，我别无选择，只能在收到预检（OPTIONS）请求时用几个标头更新后端：

• Access-Control-Allow-Headers，其中包含请求在同一标头上的所有内容；
• 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': '*',
    },

在重新测试我们的请求时，一切都很顺利。我们找不到仅在客户端执行此操作的方法。

谢谢大家的评论。