webpack devServer 的 proxy 配置项有以下几个常用选项:

target: 指定要代理的目标 URL[1][4]。

changeOrigin: 设置为 true 时,会将请求头中的 Host 修改为目标 URL 的主机名[4][5]。

pathRewrite: 用于重写请求路径[4]。例如:

<code>pathRewrite: {

'^/api': ''

}

这会将 /api 开头的请求路径中的 /api 替换为空字符串。

secure: 设置为 false 可以接受运行在 HTTPS 上且证书无效的后端服务器[4]。

context: 可以是路径字符串或路径数组,用于配置哪些请求需要被代理[1]。

要修改 Host 头,有两种方法:

设置 changeOrigin 为 true:

proxy: {

'/api': {

target: 'http://example.com',

changeOrigin: true

}

}

这会自动将 Host 头设置为目标 URL 的主机名[5]。

使用 headers 选项手动设置:

proxy: {

'/api': {

target: 'http://example.com',

headers: {

Host: 'example.com'

}

}

}

这种方法可以更精确地控制 Host 头的值[1]。

修改 Host 头的主要目的是解决跨域问题,因为服务器可能会根据 Host 头来判断请求的来源。通过修改 Host 头,可以让服务器认为请求是从允许的域名发出的,从而避免跨域限制[5]。

Citations:

[1] https://webpack.docschina.org/configuration/dev-server/

[2] https://blog.csdn.net/qq_42062727/article/details/107681498

[3] https://blog.csdn.net/weixin_43870259/article/details/130310293

[4] https://www.cnblogs.com/azoux/p/17840835.html

[5] https://juejin.cn/post/7281147452979462202