devServer changeOrigin不管用

devServer changeOrigin属性是修改后端服务器吸取到的 headers 里的 Host 属性
vue.config.js

2. const { defineConfig } = require('@vue/cli-service')
3. module.exports = defineConfig({
4.   transpileDependencies: true,
5.   devServer: {
6.     proxy: {
7.       '/api': {
8.         target: 'http://localhost:3000',
9.         changeOrigin: false
10.       }
11.     }
12.   }
13. })

复制代码

后端 headers

2. {
3.   'x-forwarded-host': '192.168.0.111:8080',
4.   'x-forwarded-proto': 'http',
5.   'x-forwarded-port': '8080',
6.   'x-forwarded-for': '192.168.0.111',
7.   referer: 'http://192.168.0.111:8080/',
8.   connection: 'close',
9.   origin: 'http://192.168.0.111:8080',
10.   'content-length': '27',
11.   'content-type': 'application/json',
12.   'accept-encoding': 'gzip, deflate',
13.   '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',
14.   accept: 'application/json, text/plain, */*',
15.   'user-agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:109.0) Gecko/20100101 Firefox/116.0',
16.   host: '192.168.0.111:8080'
17. }

复制代码

改为 hangeOrigin: true 后 headers

2. {
3.   'x-forwarded-host': '192.168.0.111:8080',
4.   'x-forwarded-proto': 'http',
5.   'x-forwarded-port': '8080',
6.   'x-forwarded-for': '192.168.0.111',
7.   referer: 'http://192.168.0.111:8080/',
8.   connection: 'close',
9.   origin: 'http://192.168.0.111:8080',
10.   'content-length': '27',
11.   'content-type': 'application/json',
12.   'accept-encoding': 'gzip, deflate',
13.   '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',
14.   accept: 'application/json, text/plain, */*',
15.   'user-agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:109.0) Gecko/20100101 Firefox/116.0',
16.   host: 'localhost:3000'
17. }

复制代码

可以看到 host 由 host: '192.168.0.111:8080' 变为后端服务器地点 host: 'localhost:3000'
通过上面的探究，根本可以得出以下结论：

• changeOrigin 设置项用来修改 host header，而非 origin header
  
• Host header 用来处理处罚假造主机的标题，和跨域无关
  
• 一样平常情况下，设置署理时可以忽略这个设置项，保持默认即可
  
• 特别情况下，很大概后端服务就用 host 做校验了，此时根据实际情况去设置
  

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

继续阅读请点击广告