Webpack "Invalid Host Header"

error信息

问题原因

新版webpack-dev-server修改了一些东西，默认检查hostname。如果hostname不是配置内的，将不可访问。

webpack-dev-server 更新的2.4.3 和 1.16.4 版本，除了常规的 BugFixes 和 Features，还特别注明了一项 Security Fix，并指出这很可能是一个 Breaking Change，但因为并没有涉及到架构、主要功能等影响重大的地方，因此犯不上增加 Major Version，只是作为安全性补丁，更新了 Patch Version。

这轮更新主要是新增了对 host header 的正确性检测，以屏蔽未经授权的访问。开发者需要在执行 webpack-dev-server 命令时手动添加 --public 选项，取值为授权的 host，否则响应中就会提示这个问题，也就是我们看到的“Invalid Host Header”。

解决方案

• 执行 webpack-dev-server 命令时手动添加--public选项，取值为授权的 host，这是官方建议的做法，目的是为了安全。
• 设置 webpack-dev-server 的配置项disableHostCheck：true 以禁用这一检测，如果开发者使用了代理，或在开发环境中不 care 这些安全问题，该设置可以直接斩草除根。
  例外

这些场景下不受该补丁的影响：

• host 为 localhost 或 127.0.0.1 时不会受阻。
• 只有使用 webpack-dev-server 或 webpack-dev-middleware 时会进行该项检测，webpack 和 打包后的代码不受此影响。

参考：

https://github.com/webpack/webpack-dev-server/issues/882
https://github.com/webpack/webpack-dev-server/releases/tag/v2.4.3
https://github.com/webpack/webpack-dev-server/releases/tag/v1.16.4