在 Angular 中修复 "invalid host header"

Question

我在 Angular v4 中有一个应用程序，它必须根据 url 访问权限更改 scss。例如：如果浏览器中的 link 是 "example.com" 那么应用程序的背景色为黑色如果 link 是 "example2.com" 那么背景颜色：红色

我有下一个问题：

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

然后我运行带有 "example.com:4200" 的应用程序没有运行...浏览器向我显示此消息

"invalid host header"

我该如何解决这个问题？

Answer 1

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

host
allowedHosts
disableHostCheck

也许其中之一适合您？

来源：

https://webpack.js.org/configuration/dev-server/

Answer 2

这是我在 angular 7.2.1

下出现的

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

"disableHostCheck": true

Answer 3

原因-

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

如何解决？

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

ng (Angular) => 杀死服务器并重新启动它，添加
```
--host 0.0.0.0 --disableHostCheck true 
```
到命令。
Angular2 => 与上面相同，但添加
```
--host 0.0.0.0  --disable-host-check
```
改为
webpack-dev-server => 杀死服务器并重新启动它，添加
```
--host 0.0.0.0
```
到命令。

这里有时也需要

--disable-host-check。

在 Angular 中修复 "invalid host header"

Fix "invalid host header" in Angular

url

hosts

angular