解決 Webpack "Invalid Host Header"
https://tonghuashuo.github.io/blog/webpack-dev-server-invalid-host-header.html
一直以來都在用 Webpack 打包程式碼，配合 webpack-devserver 作 Hot Module Replacement 感覺棒棒噠，可以專心於程式邏輯，不用被無關緊要的瑣事打擾。直到剛才……
突如其來的問題
正和同事討論一個技術問題，寫了個 Demo 打算髮連結過去一起看看，結果同事說打不開，報“Invalid Host Header”，可我本機執行正常。試了下別的裝置，一樣打不開，確定問題真的存在。既然在本機能跑通，說明問題應該不在程式碼，而在於網路，ifconfig
度娘給了一堆有的沒的，StackOverflow 上一時也沒有相關的討論，於是去到 Github 上翻 Issue，似乎也沒有對症的。
2017-06-03: 後來用 angular-cli 時候又遇到這個問題，這時候已經有相關的 Issue 了，只是我第一次遇到這個問題時候還比較早，暫時沒有而已。
靈光一現
突然想到前兩天剛更新過一批 npm 的包，其中就有 webpack 和 webpack-dev-server，不過主版本號沒有變，理論上不大可能會有 Breaking Change，抱著試一試的心態，去看了下 Releases，結果意外發現了驚喜。
webpack-dev-server 在大約兩週前更新了 2.4.3 和 1.16.4 兩個版，除了常規的 BugFixes 和 Features，還特別註明了一項 Security Fix，並指出這很可能是一個 Breaking Change，但因為並沒有涉及到架構、主要功能等影響重大的地方，因此犯不上增加 Major Version，只是作為安全性補丁，更新了 Patch Version。
這輪更新主要是新增了對 host header 的正確性檢測（就是我當前遇到的問題），以遮蔽未經授權的訪問。開發者需要在執行 webpack-dev-server 命令時手動新增 --public
解決方案
官方提供了兩個解決方案：
- 執行 webpack-dev-server 命令時手動新增 --public 選項，取值為授權的 host，這是官方建議的做法，目的是為了安全。
- 設定 webpack-dev-server 的配置項 disableHostCheck 為 true 以禁用這一檢測，如果開發者使用了代理，或在開發環境中不 care 這些安全問題，該設定可以直接斬草除根。
例外
當然，或許你並沒有遇到這樣的問題（等等，如果你沒遇到這個問題，你又是出於什麼原因把這篇文章看到了這裡？），因為官方貼心的設定了一些例外場景，這些場景下不受該補丁的影響：
- host 為 localhost 或 127.0.0.1 時不會受阻。
- 只有使用 webpack-dev-server 或 webpack-dev-middleware 時會進行該項檢測，webpack 和 打包後的程式碼不受此影響。
番外
此次受影響的還包括其它基於 webpack-dev-server 的模組，例如 angular-cli，其 ng serve 命令就是基於 webpack-dev-server 實現的，在升級到 1.0.1 之後收到了牽連。目前官方已經解決了這一問題，1.0.0-beta.1 版本添加了--disable-host-check選項，更新後即可使用。如果你出於某些原因不方便更新，也可以反過來降級到 1.0.0 作為臨時解決方案。
相關 Issue 如下：
寫在最後
經過這次的問題，總結了幾個小點與大家分享：
- 創業公司對新技術的接受度還是比較高的，這點是好事也是壞事。
-
- 好處：能接觸到較為前沿的技術，對個人能力的提升非常有利。
- 壞處：坑多，不少還是沒有前車之鑑的新坑，缺少相關資料。
- 文件很重要，不出問題不覺得，一出就得指望 Change Log 了。
- 如果度娘、谷哥、SO 都幫不了你，試試 Github，可能會有奇效。
- 社群的力量真 tm 強大。