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

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

### 基本用法

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

```bash
ngrok http 5780
```

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

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

如下圖示：

![](https://stwillblogassets.blob.core.windows.net/files/images/external/stwillblogassets.blob.core.windows.net/4c99c9fb486f2f635252-image_3160.png)

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

![](https://stwillblogassets.blob.core.windows.net/files/images/external/stwillblogassets.blob.core.windows.net/b1eb11c835cee6e8ca90-image_3161.png)

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

### 重寫標頭

你可以從 [Rewriting the Host header](https://ngrok.com/docs#host-header) 看到相關的說明與指令。基本上有兩種可能的用法：

1.  指定 `-host-header=rewrite` 參數，並在指定 Ports 時直接給與你要的域名，例如：`localhost`
    
    ```bash
    ngrok http -host-header=rewrite localhost:5780
    ```
    
2.  明確指定 `Host` 標頭在 `-host-header=` 參數中
    
    ```bash
    ngrok http -host-header=localhost 5780
    ```
    

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

**相關連結**

-   [ngrok – secure introspectable tunnels to localhost](https://ngrok.com/)
-   [ngrok – documentation](https://ngrok.com/docs)