WebPack Invalid Host header: 局域网不能访问开发服务器

从其他设备访问局域网的Web项目，您可能遇到了Invalid Host header，它不允许您检查您的项目在这个设备上的外观。

在这篇文章中，我们将给你2的解决方法来访问您的开发服务器从局域网。

指定你的主机

您可以通过在命令行中运行公共命令，例如在公共命令行中设置公共标志和IP和端口作为参数，或者在命令行中直接运行命令，从而指定可以公开访问您的开发服务器的IP。例如：192.168.1.1:8080

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

不要忘记停止运行的开发服务器并重新启动它。

禁用主机检查

另一种选择，是通过设置在你WebPACK开发服务器配置的devserver disablehostcheck真正禁用检查主机。此方法在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

本地示例

• 项目环境：docker容器Ubuntu12.04
• 容器中项目访问地址：192.168.99.100:8080、localhost:8080

  "scripts": {
    "dev": "webpack-dev-server --public 192.168.99.1 --port 8080 --host 0.0.0.0"
  }

  //通过 npm run dev启动项目
  Project is running at http://192.168.99.1/
  webpack output is served from /dist/
  Content not from webpack is served from /var/www/sass-dashboard
  404s will fallback to /index.html

主机直接通过http://192.168.99.100:8080访问，成功。
主机通过绑定host访问，http://docker:8080，失败。