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

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

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

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

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

javascript 复制代码
pathRewrite: {
  '^/api': ''
}

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

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

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

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

  1. 设置 changeOrigin 为 true:
javascript 复制代码
proxy: {
  '/api': {
    target: 'http://example.com',
    changeOrigin: true
  }
}

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

  1. 使用 headers 选项手动设置:
javascript 复制代码
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

相关推荐
摆烂工程师8 分钟前
ChatGPT免费用户可以使用Deep Research啦!并且o3、o4-mini的可使用次数翻倍!
前端·后端·程序员
狂炫一碗大米饭9 分钟前
作为前端你不得不知道的浏览器相关知识1🚀
前端
天天扭码17 分钟前
🔥 别再用 class 了!JS 原型链才是 YYDS
前端·javascript·面试
GISer_Jinger22 分钟前
📢《告别手动抓狂!Trae国际版+BrowserTools MCP 实现前端错误调试自动化》🚀
前端
前端大白话23 分钟前
震惊!90%前端工程师都踩过的坑!computed属性vs methods到底该怎么选?一文揭秘高效开发密码
前端·vue.js·设计模式
一天睡25小时23 分钟前
React与Vue表单的对比差异
前端·javascript
作曲家种太阳23 分钟前
第七章 响应式的 watch 实现【手摸手带你实现一个vue3】
前端
前端小巷子25 分钟前
深入解析 iframe
前端
WEI_Gaot25 分钟前
ES6 模板字符串
前端·javascript
前端大白话26 分钟前
前端工程师必看!手把手教你用CSS实现超丝滑的自适应视频嵌入
前端·css·前端框架