Angular CLI：解决webpack-dev-server报错Invalid Host Header

Angular cli底层是使用webpack，webpack默认会对访问的主机进行检测，这是为了防止主机受到DNS重新绑定攻击。

解决方法

根据运行的脚本不同分为两种情况解决。

一、angular cli脚本

如果是使用angular cli的脚本ng serve启动服务器，可以使用--disable-host-check解决。

ng serve --disable-host-check

也可以添加上--public-host，指定公开访问的主机地址。

ng serve --disable-host-check --public-host=example.com

二、webpack-dev-server脚本

如果是使用webpack-dev-server启动服务器有两种方法。

1、添加--disable-host-check

webpack-dev-server --disable-host-check

2、在webpack.config.js设置disableHostCheck为true

 devServer: {
    compress: true,
    disableHostCheck: true,
 }

提示：之所以会使用webpack-dev-server启动，这可能是用户执行了ng eject后直接使用webpack，参考撤回Angular CLI执行的ng eject。