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

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

版权声明:著作权归作者所有。

相关推荐

Angular CLI:配置webpack热模块替换hmr(Hot Module Replacement)

热模块替换(Hot Module Replacement)是Webpack的特性,它可以让我们在调试时不需要重新构建就可以更新代码到正在运行的应用。Angular CLI需要做一些设置就可以使用webpack的热模块替换功能。添加依赖hrm依赖于@angularclass/hmr,安装@angularclass/hmr到dev-dependency$ npm