解决 Vue 项目 invalid host header 问题（两种方案）
问题出现背景
做微信H5网页时，使用花生壳内网穿透进行调试时，打开网页显示：invalid host header
分析问题
这句话的意思是：无效的Host请求头；
因为在vue在调试时相当于启动了一个服务器以供我们访问（当我们build后，就可以放在我们自己的nginx等服务器）
测试环境下的webpack有一个host检查功能：webpack 的 devServer 中
如果不配置host就无法访问，解决办法有好几种，可以去设置host，比如：
第一种解决方案
设置允许访问的域名
module.exports = {
//...
devServer: {
allowedHosts: [
'host.com', // 允许访问的域名地址，即花生壳内网穿透的地址
'.host.com' // .是二级域名的通配符
],
},
};另外一种更简单的解决方案
设置跳过host检查
// vue3 vue.config.js
module.exports = {
// 跳过检查host
devServer: { disableHostCheck: true }
}在vue-cli版本为2.x的情况下修改webpack.dev.conf.js中的devServer对象加入disableHostCheck: true
devServer: {
disableHostCheck: true,
}如果不生效？必须要重启！必须要重启！必须要重启！
0顶
0 踩
共 0 条评论