解决 Webpack "Invalid Host He

突如起来的问题

之前使用的是 @angular/cli 1.00，后发现新版本的@angular/cli升级后，支持使用预 (AoT) 编译器，只需要加 --aot就好，然而运行ng serve --aot时发现，本地能正常打开，而把服务映射出去的无法打开，显示Invalid Host Header

查找发现

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 和 打包后的代码不受此影响。

对于新版@angular/cli

此次受影响的还包括其它基于 webpack-dev-server 的模块，例如 @angular/cli，其 ng serve 命令就是基于 webpack-dev-server 实现的，在升级到 1.0.1 之后收到了牵连。目前官方已经解决了这一问题，1.0.0-beta.1 版本添加了--disable-host-check选项，更新后即可使用。如果你出于某些原因不方便更新，也可以反过来降级到 1.0.0 作为临时解决方案。

---

相关 Issue 如下

• 问题讨论，Invalid Host header after updating to 1.0.1
• 解决方案：feat(@angular/cli): add host check flags to ng serve