web-dev-qa-db-ja.com

Angularの「無効なホストヘッダー」を修正

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」でアプリを実行すると、アプリが実行されません...ブラウザにこのメッセージが表示されます

「無効なホストヘッダー」

この問題を解決するにはどうすればよいですか？

angularurlhosts
4
Sergio Mendez

これは、angular 7.2.1

Angular CLIを使用していると仮定すると、解決策はarchitect> serve> optionsの下のangular.jsonに次の行を追加することでした：

"disableHostCheck": true
11
Fredrik_Macrobond

おそらくwebpack開発サーバーを使用しています。 devServer内のwebpack.config.jsで設定するオプションがあります：

  • Host
  • allowedHosts
  • disableHostCheck

おそらくあなたのためにそれらの作品の1つは？

出典：

0
Hero Wanders

理由-

ほとんどの開発指向のアプリケーションサーバー（ng、webpack-dev-server、WAMPPなど）は、デフォルトで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もここで必要になる場合があります。

0
Krishna