修复Angular中的“无效的主机头”

Question

我在Angular v4中有一个应用程序，它必须更改访问URL的scssdependong。例如：如果浏览器中的链接为“ 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（或在某些情况下直接阻止流量）。本质上，只允许从自身定向到您机器的流量通过，这意味着通过隧道的流量将与直接来自您机器的流量不同。尽管它可以在您的机器上运行，但服务器的设置方式使其即使其他本地机器也无法连接到它。

我如何解决它？

在大多数情况下，修复方法是告诉服务器重新启动并允许来自 localhost 外部的连接。

1. ng (Angular) => 杀死服务器并重新启动它，添加

   --host 0.0.0.0 --disableHostCheck true 
   

   到命令。

2. Angular2 => 同上，但添加

   --host 0.0.0.0  --disable-host-check
   

   反而

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

   --host 0.0.0.0
   

   到命令。

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