VUE开发时 invalid host header错误的解决 | 天一阁

VUE开发时 invalid host header错误的解决

这两天在学习vue开发,现在手机上看看效果,但是发现总是报错invalid host header。现在把解决方法记录在此。

vue的代码写完后,都是npm run dev启动一个测试server,想用手机访问本地的机器,先是无法访问,后来才发现,Project is running at http://localhost:8080/ 。启动的ip是localhost,也就是127.0.0.1,那手机上通过局域网地址肯定无法访问了。

google了一下,发现如果要改这个绑定的ip,需要把webpack.config.js文件中devServer中增加host字段,比如增加这样的配置host: '0.0.0.0',这样重新启动后,这个小web服务器就绑定到了0.0.0.0的ip上了。

但是手机上还是不能访问,在手机浏览器中报错invalid host header, 于是又去google。原来新版的webpack-dev-server修改了一些东西,默认检查hostname。如果hostname不是配置内的,将不可访问。应该是考虑一些安全的因素,才有这种配置。虽然我还不知道webpack-dev-server这玩意是神马?看来的抓紧时间学习webpack了。

这个问题也能解决,就是继续在webpack.config.js文件中devServer中增加disableHostCheck: true配置,这样再重新启动后,问题就解决了。