修复角度中的"invalid host header"

Question

我在 Angular v4 中有一个应用程序，它必须更改访问 url 的 scss 依赖项。 例如： 如果浏览器中的链接为"example.com"，则应用程序具有背景色：黑色 如果链接为"example2.com"，则背景颜色：红色

我有下一个问题：

当我转到 C：\Windows\System32\drivers\etc 中的主机并在主机中设置下一个配置 127.0.0.1 example.com 127.0.0.1 example2.com

然后我用"example.com:4200"运行应用程序，该应用程序无法运行......浏览器向我显示此消息

"无效的主机标头">

如何解决此问题？

Answer 1

这出现在角度 7.2.1 下

假设您使用的是 Angular CLI，解决方案是在 angular.json 的 architect>serve>options 下添加以下行：

"disableHostCheck": true

Answer 2

原因 -

大多数面向开发的应用程序服务器(如 ng、webpack-dev-server 或 WAMPP(默认仅绑定到 localhost(或在某些情况下直接阻止流量(。 从本质上讲，只允许从机器本身定向到您的计算机的流量通过，这意味着通过隧道的流量与直接来自机器的流量的工作方式不同。 即使它可以在您的计算机上工作，服务器的设置方式也使得即使是其他本地计算机也无法连接到它。

我该如何解决？

在大多数情况下，解决方法是告诉服务器重新启动并允许来自外部本地主机的连接。

1. ng (角度( =>终止服务器并重新启动它，添加

   --host 0.0.0.0 --disableHostCheck true 
   

   到命令。

2. 角度2 =>同上，但添加

   --host 0.0.0.0  --disable-host-check
   

   相反

3. webpack-dev-server =>杀死服务器并重新启动它，添加

   --host 0.0.0.0
   

   到命令。

这里有时也需要--disable-host-check。

Answer 3

您可能正在使用 webpack 开发服务器。 它具有在devServer内设置webpack.config.js的选项：

• host
• allowedHosts
• disableHostCheck

也许其中一个适合你？

来源：

• 我在 Webpack 开发服务器中运行我的 React 应用程序时收到"无效主机标头"消息 Cloud9.io
• https://webpack.js.org/configuration/dev-server/