解决 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'   // .是二级域名的通配符   
    ],
  },
};
1
2
3
4
5
6
7
8
9

还有一种更简单的解决方案

更简单的解决方案

设置跳过host检查

// vue3 vue.config.js
module.exports = {
    // 跳过检查host
    devServer: { disableHostCheck: true }
}
1
2
3
4
5

// 在vue-cli版本为2.x的情况下修改webpack.dev.conf.js中的devServer对象加入disableHostCheck: true
devServer: {
  disableHostCheck: true,
}
1
2
3
4

不生效？

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