The Will Will Web | 如何讓 ngrok 瀏覽只能接受 localhost 連接的網站

The Will Will Web

記載著 Will 在網路世界的學習心得與技術分享

如何讓 ngrok 瀏覽只能接受 localhost 連接的網站

透過 ngrok 可以快速建立 Internet 可連接的網站伺服器,讓本機電腦的測試環境直接對外提供連線,以便進行測試與偵錯。這個功能最方便的地方就是「行動版網站」開發測試用,任何一台手機,無論遠端或近端,只要透過 ngrok 一下就能連上本機電腦,非常的實用。不過,透過 IISExpress 開發測試的時候,預設只能接受 Host 標頭為 localhost 的連線,以至於無法順利連線,本篇文章將講解 ngrok 重寫 Host 標頭的各種用法。

基本用法

如果要將本機的 Port 5780 對外提供連線,可以很簡潔的輸入以下命令:

ngrok http 5780

這過程會啟動 ngrok 並且完整以下工作:

  1. 選擇一個 Region (地區) 並設定一組亂數的網址對外提供連線。
  2. 建立一組 Forwarding (轉發) 規則,並且設定本機與 ngrok 網站的 Tunnel (通道)。
  3. 建立一個 Web Interface (基本管理介面),幫助你釐清所有透過 ngrok 進來的 HTTP 封包內容。

如下圖示:

然而當本機使用 IISExpress 進行開發測試的時候,你可能會看到以下錯誤訊息:

這時你可以連到 http://127.0.0.1:4040 看一下所有從 ngrok 連過來的 HTTP 封包細節,預設的情況下,ngrok 不會對任何 HTTP 封包做修改,直接轉發到你指定的本機伺服器。其中 要求標頭 (Request Headers) 的部分,你會看到一個 Host 標頭,這裡指向的會是一個 ngrok 的網址,而這個 Host 標頭正是讓 IISExpress 無法接受連接的主因。

 

重寫標頭

你可以從 Rewriting the Host header 看到相關的說明與指令。基本上有兩種可能的用法:

  1. 指定 -host-header=rewrite 參數,並在指定 Ports 時直接給與你要的域名,例如:localhost

    ngrok http -host-header=rewrite localhost:5780
    
  2. 明確指定 Host 標頭在 -host-header= 參數中

    ngrok http -host-header=localhost 5780
    

用上述方式啟動,就可以順利的透過 ngrok 連接與測試了!

 

相關連結