vue-cli4.x项目启动本地出现 invalid host header的原因

这篇博客介绍了在Vue CLI4.x项目中如何配置devServer以允许本地host访问线上项目,通过设置`disableHostCheck`为true来获取用户token。相比Vue CLI2.x,这个过程需要手动配置vue.config.js文件。

近段时间有个项目是单点登录的,项目里需要获取用户token,故本地配置host文件来访问线上项目,拿到cookie存储的用户token,所以配置了hosts文件。

之前用过vue-cli2.x,我们只需要配饰hosts文件就可以了。因为webpack是默认设置可配置host,但是新版的vue-cli4.x将这项配置独立出来,需要我们手动配置,其实也很简单,只需在vue.config.js文件中添加一个属性并设置值为true,

module.exports ={

    devServer: {
    // 本地配置host生效
    disableHostCheck:true,
    
  },


}

在使用内网穿透访问 Vue 项目时,出现 `Invalid Host header` 错误的原因Vue CLI 3 及以上版本默认启用了 Host 头检查机制。该机制用于防止 HTTP Host 头攻击,但在通过内网穿透工具(如 Frp、ngrok、sunny-ngrok 等)访问本地开发服务器时,会因为 Host 头与预期不一致而触发该错误。 为了解决这个问题,可以通过修改 `vue.config.js` 文件来调整开发服务器的 Host 检查策略。 ### 配置 `disableHostCheck: true` 在 `vue.config.js` 中设置 `devServer.disableHostCheck: true`,可以完全禁用 Host 检查,使开发服务器接受任意 Host 头的请求: ```javascript // vue.config.js module.exports = { devServer: { disableHostCheck: true, }, }; ``` 此方法适用于本地开发环境,能有效解决通过内网穿透工具访问时的 Host 头校验问题[^1]。 ### 使用 `allowedHosts: 'all'` 另一种更安全的方式是使用 `allowedHosts: 'all'`,它允许所有 Host 头访问开发服务器,同时保留了 Host 头的合法性检查机制: ```javascript // vue.config.js module.exports = { devServer: { allowedHosts: 'all', }, }; ``` 这种方式在新版 `webpack-dev-server` 中被推荐使用,既保证了兼容性,又提升了安全性[^2]。 ### 指定允许的 Host 列表 如果仅希望允许特定的域名访问,可以将 `allowedHosts` 设置为数组形式,列出允许的 Host 名称: ```javascript // vue.config.js module.exports = { devServer: { allowedHosts: ['your-ngrok-domain.com'], }, }; ``` 该配置仅允许指定域名的请求通过,适用于需要限制访问来源的场景[^2]。 ### Vue CLI 2.x 的兼容处理 对于使用 Vue CLI 2.x 的项目,可以通过修改 `webpack.dev.conf.js` 文件中的 `devServer` 配置来实现相同效果: ```javascript devServer: { disableHostCheck: true, } ``` 如果配置后仍不生效,建议检查项目是否使用了旧版本的 `webpack-dev-server`,或尝试升级到 Vue CLI 3 以上版本以获得更好的兼容性[^4]。 ---
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值