vue.js - 代理 `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”的请求的 header 。但是，来自我的应用程序的请求仍然来自 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");
        },
      },
    },
  },
};