webpack devServer proxy 有哪些常用配置项，反向代理时修改 host 要怎么做

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

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

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

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

pathRewrite: {
  '^/api': ''
}

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

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

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

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

1. 设置 changeOrigin 为 true:

proxy: {
  '/api': {
    target: 'http://example.com',
    changeOrigin: true
  }
}

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

2. 使用 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

加入交流群