Webpack无效的主机标头（无法从LAN访问Webpack开发服务器） _Webpack

本文概述

A.指定你的主机
B.禁用主机检查

【Webpack无效的主机标头（无法从LAN访问Webpack开发服务器）】愿意使用Webpack在局域网中作为移动设备从其他设备测试你的Web项目吗？你可能已经在网页上遇到了无效的主机标头错误, 该错误使你无法检查项目在此设备上的外观。
在本文中, 我们将向你展示2种解决方法, 可以轻松地从LAN访问开发服务器。
A.指定你的主机你可以通过在开发服务器(package.json)的启动命令中设置public标志以及IP和端口作为参数来指定可以公开访问你的开发服务器的IP, 如果从命令行, 例如– public 192.xx.xx.xx：8080：

{"scripts": {"start": "webpack-dev-server [the rest of your config] --public xxx.xxx.xxx.xx:port"}}

不要忘记停止任何正在运行的开发服务器并重新启动它。
B.禁用主机检查另一种选择是通过在webpack开发服务器配置(webpack-dev-server.config.js)的devServer属性中将disableHostCheck标志设置为true来禁用主机检查过程。自webpack 2.4.3发行以来, 此功能可用。
你还需要将主机设置为0.0.0.0, 否则, 如果你尝试从另一台设备访问具有IP的服务器, 它将加载并加载, 但不会发生任何事情：
注意该方法应在代理或类似设置之后使用以禁用此检查。仅在知道自己的工作后才使用它, 但是不建议这样做。

// .. rest of webpack dev serverconst config = {// .. rest of config object// Server Configuration optionsdevServer: {// .. rest of devserver optionshost: '0.0.0.0', disableHostCheck: true}, // .. rest of config object}; // .. rest of webpack dev server

如上一步所述, 不要忘记停止任何正在运行的开发服务器并重新启动它。以前的任何变通方法都应该使你能够在几秒钟内从LAN探索你的项目。
编码愉快！