devServer changeOrigin不管用

devServer changeOrigin属性是修改后端服务器接收到的 headers 里的 Host 属性

vue.config.js

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({transpileDependencies: true,devServer: {proxy: {'/api': {target: 'http://localhost:3000',changeOrigin: false}}}
})

后端 headers

{'x-forwarded-host': '192.168.0.111:8080','x-forwarded-proto': 'http','x-forwarded-port': '8080','x-forwarded-for': '192.168.0.111',referer: 'http://192.168.0.111:8080/',connection: 'close',origin: 'http://192.168.0.111:8080','content-length': '27','content-type': 'application/json','accept-encoding': 'gzip, deflate','accept-language': 'zh-CN,zh;q=0.8,zh-TW;q=0.7,zh-HK;q=0.5,en-US;q=0.3,en;q=0.2',accept: 'application/json, text/plain, */*','user-agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:109.0) Gecko/20100101 Firefox/116.0',host: '192.168.0.111:8080'
}

改为 hangeOrigin: true 后 headers

{'x-forwarded-host': '192.168.0.111:8080','x-forwarded-proto': 'http','x-forwarded-port': '8080','x-forwarded-for': '192.168.0.111',referer: 'http://192.168.0.111:8080/',connection: 'close',origin: 'http://192.168.0.111:8080','content-length': '27','content-type': 'application/json','accept-encoding': 'gzip, deflate','accept-language': 'zh-CN,zh;q=0.8,zh-TW;q=0.7,zh-HK;q=0.5,en-US;q=0.3,en;q=0.2',accept: 'application/json, text/plain, */*','user-agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:109.0) Gecko/20100101 Firefox/116.0',host: 'localhost:3000'
}

可以看到 host 由 host: '192.168.0.111:8080' 变为后端服务器地址 host: 'localhost:3000'

通过上面的探究，基本可以得出以下结论：

1. changeOrigin 配置项用来修改 host header，而非 origin header
2. Host header 用来处理虚拟主机的问题，和跨域无关
3. 一般情况下，设置代理时可以忽略这个配置项，保持默认即可
4. 特殊情况下，很可能后端服务就用 host 做校验了，此时根据实际情况去设置