Angular - Invalid Host Header 安全性處理

煩死人的詭異錯誤。

前言

近期調整 Angular 專案，

將原本 build 成靜態網頁的方式，

改由直接透過 ng serve 去 handler，

結果蹦出一些奇怪問題。

馬的發顆

當執行完部屬後：

ng serve

從外網看畫面出現了類似如下圖（圖為網路來源）：

• Invalid Host Header

但明明在本機 local 看很正常啊啊啊！！！

爬了文之後...

主要是因為 Angular CLI 依賴的 webpack-devserver 做了更新。

在版本 1.16.4 和 2.4.3 中提到了disableHostCheck 這個功能：

• The response will contain a note when using an incorrect Host header.
• For usage behind a Proxy or similar setups we also added a disableHostCheck option to disable this check.

這個版本在安全性上，將會對 Host Header 做檢查，

避免用戶端透過一些惡意 Proxy 等方式，訪問到 webpack 主機。

由於 AngularCLI 在版本 1.0.1 之後受到這類問題影響，

已經於 1.0.0-beta.1 以及之後提供了解決方案：

ng serve --disable-host-check

摁..看了一下自己的版本：

ng -v

嘿嘿～ 終於處理好這個問題。

參考資料

這次主要解救來源是找到這篇：

• 解决 Webpack "Invalid Host Header"

而在 AngularCLI 的討論區可以找到：

• Invalid Host header after updating to 1.0.1
• feat(@angular/cli): add host check flags to ng serve

有勘誤之處，不吝指教。ob'_'ov