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

时间:2022-04-06 17:51:10

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

参考:feat(@angular/cli): add host check flags to ng serve