Copyright © 2008 ~ 2024 MUKI space* / omegaBook theme All Rights Reserved.

發生錯誤的原因

選擇 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 都是作者封裝好的,所以出現兩個情況:

    1. 我沒辦法隨意加入 header
    2. 我沒辦法用攔截器攔截到這些 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 付費版以解決這問題。

    歡迎給我點鼓勵,讓我知道你來過 :)

    Subscribe
    Notify of
    guest

    0 則留言
    Inline Feedbacks
    View all comments