MUKI AI Summary
使用 Ngrok 免費版代理 API 時，因為前導頁導致出現 ERR_NGROK_6024 錯誤。這是因為 API 網址被導向前導頁，無法直接訪問 API 資料。由於 API server 是本機測試環境，無法修改 header 或使用攔截器解決。
可以透過 Chrome Extension Requestly 來解決此問題。安裝後，設定 HTTP 規則，添加 URL 規則：https://.ngrok-free.app/ 和 https://*.ngrok-free.app，並加入 ngrok-skip-browser-warning: true。這樣就能跳過 Ngrok 的介紹頁，成功取得 API 資料。此方法適用於本機開發，如需正式上線，建議使用 Ngrok 付費版。...
發生錯誤的原因
選擇 Ngrok 的前情提要：
- 為了解決 Mixed content (HTTP & HTTPS) 的問題：前端環境是
https，後端 API 為http
我用 Ngrok 免費版掛代理，讓 API url 變成 https:// 開頭。而正是因為使用 Ngrok 免費版，當你輸入 Ngrok 提供的網址時，他會先進入一個前導頁，像是這樣的畫面：
所以，如果我代理的是純 API 網址，就會因為這一頁導致我打 API 時候出現 ERR_NGROK_6024 錯誤。
▼ 開發者工具的 Network 頁籤 ➡️ API Preview 面板，沒辨法回傳正確的資料：
原本加個 header 就能解決，但這個 API server 是我用 Docker 建立的本機測試環境，且這些 API 都是作者封裝好的，所以出現兩個情況：
- 我沒辦法隨意加入 header
- 我沒辦法用攔截器攔截到這些 API 資料，因為他是包在後端裡面的，不是由前端控制。
用 Requestly 協助加入 API 規則
如果你跟我一樣，因為一些原因，沒辦法從前端打 API 的地方加入 request header，可以考慮使用第三方套件做輔助。
我找到了一個 Chrome Extension：Requestly - Intercept, Modify & Mock HTTP Requests，可以協助我們處理 reqeust header。
▼ 安裝後會自動開啟 Requestly 的網站，選擇「HTTP Rules」➡️ 右上角的「New Rule」後，再選擇「Modify Headers」➡️ 「Create Rule」開始設定規則
▼ 設定了兩個 URL 規則，可以直接複製貼上
URL 1：https://.ngrok-free.app/
URL 2：https://*.ngrok-free.app
兩個網址的規則都相同：ngrok-skip-browser-warning: true
最後記得點選右上角的「Save rule」存檔，這樣就可以了。
▼ 再打一次 API，看到 reqeust header 已加入這段設定
▼ 這樣就能跳過 Ngrok 的介紹頁，順利取得 API 資料了。
結語
使用 Requestly 協助加入 request header 的前提是，我需要開發串接 API，但我又沒辦法自行修改 request header 時，就能使用這個工具。當然這狀況僅限於本機開發，如果要正式上線，我就不會用 Ngrok 掛 HTTPS 代理，或是改用 Ngrok 付費版以解決這問題。
1