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

本文概述

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

愿意使用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 server

const config = {
    // .. rest of config object

    // Server Configuration options
    devServer: {
        // .. rest of devserver options

        host: '0.0.0.0', disableHostCheck: true
    }, // .. rest of config object
};

// .. rest of webpack dev server

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

编码愉快！