突如起来的问题
之前使用的是 @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 作为临时解决方案。
网友评论