代理 `changeOrigin` 设置似乎不起作用 [英] Proxy `changeOrigin` setting doesn't seem to work

问题描述

我正在使用 Vue CLI 3.0.0 (rc.10) 并且并排运行两个服务器(后端服务器和 WDS).

I'm using Vue CLI 3.0.0 (rc.10) and am running two servers (backend server and WDS) side by side.

我按照 Vue CLI 文档中的 devServer.proxy 说明添加了一个我的 vue.config.js 的代理选项.我还按照 http-proxy-middleware 库的说明 来补充选项:

I followed the devServer.proxy instructions on the Vue CLI documentation to add a proxy option to my vue.config.js. I also followed the instructions for the http-proxy-middleware library to supplement the options:

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 阻塞:

My understanding is that the changeOrigin: true option needs to dynamically change the Origin header on the request to "http://localhost:4000". However, requests from my app are still being sent from http://localhost:8080 and they trigger CORS blockage:

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

我做错了什么?

推荐答案

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

I was having basically the same problem, and what finally worked for me was manually overwriting the Origin header, like this:

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

这篇关于代理 `changeOrigin` 设置似乎不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！