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

} 

不生效？

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