解决 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, } 

不生效？

必须要重启！必须要重启！必须要重启！