Angular：Invalid Host/Origin header问题解决方案

最新推荐文章于 2024-06-20 11:47:31 发布

原创最新推荐文章于 2024-06-20 11:47:31 发布 · 5k 阅读

3 ·

CC 4.0 BY-SA版权

前端开发同时被 3 个专栏收录

142 篇文章

订阅专栏

Angular6基础学习

59 篇文章

订阅专栏

Angular6

52 篇文章

订阅专栏

本文解决了一个在Angular项目中常见的InvalidHost/Originheader错误，通过在angular.json文件中修改@angular-devkit/build-angular:dev-server的配置，添加disableHostCheck:true选项，以禁用主机检查并避免开发环境下的DNS重新绑定攻击。

最近在Chrome浏览器调试的时候遇到一个问题，浏览器的控制台一直报错 Invalid Host/Origin header，在百度上看到也有人遇到过这个问题，参考链接：https://blog.youkuaiyun.com/u013243347/article/details/85223016

作者给出的解释是这是webpack本身出于安全考虑，因为不检查主机的应用程序容易受到DNS重新绑定攻击。但是，在我们的开发环境下，可以禁用掉disableHostCheck这一配置项。

也给出了解决方案：在webpack.config.js配置文件中添加以配置——disableHostCheck:true

但是我的这个项目用的是Angular6，项目里面没有这个webpack.config.js文件，这样的话我们需要在angular.json文件里面，修改一个builder名为@angular-devkit/build-angular:dev-server的配置，在它的options里面添加“disableHostCheck”:true

附上我的angular.json的相关代码片段：

"serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "options": {
            "browserTarget": "angular-antd:build",
            "disableHostCheck": true
          },
          "configurations": {
            "production": {
              "browserTarget": "angular-antd:build:production"
            }
          }
        },

参考文献：https://www.jianshu.com/p/c04dae23ed51