Proxy`changeOrigin`设置似乎无效

Question

我正在使用Vue CLI 3.0.0（rc.10），并且正在并行运行两个服务器（后端服务器和WDS）。

我跟随the devServer.proxy instructions on the Vue CLI documentation将代理选项添加到我的vue.config.js。我还遵循the instructions for the http-proxy-middleware library来补充选项：

module.exports = {
  lintOnSave: true,
  outputDir: '../priv/static/',
  devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost:4000',
        changeOrigin: true,
        ws: true,
      },
    },
  },
}; 

[我的理解是changeOrigin: true选项需要将请求上的Origin标头动态更改为“ http://localhost:4000”。但是，我的应用程序发出的请求仍从http://localhost:8080发送，它们触发了CORS阻塞：

Request URL: http://localhost:4000/api/form
Request Method: OPTIONS
Status Code: 404 Not Found
Remote Address: 127.0.0.1:4000
Host: localhost:4000
Origin: http://localhost:8080 <-- PROBLEM

我在做什么错？

Answer 1

我遇到了基本相同的问题，最终对我有用的是手动覆盖Origin标头，如下所示：

module.exports = {
 lintOnSave: true,
  outputDir: '../priv/static/',
  devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost:4000',
        changeOrigin: true,
        ws: true,
        onProxyReq: function(request) {
          request.setHeader("origin", "http://localhost:4000");
        },
      },
    },
  },
};