如何在 HTTP 網頁中允許 HTTPS API 呼叫

開發測試時很常遇到這種很尷尬的情況：前端頁面和 API 不在同一種協定上，有些內部環境還沒完整上 HTTPS，但你又得先測功能。這篇就是記錄在瀏覽器端如何暫時放寬限制，方便做本機或內部測試。

先講一個重要前提

瀏覽器預設阻擋混合內容，是為了安全。也就是說，如果 HTTPS 頁面去載入 HTTP 資源，通常會被當成有風險。這個限制不是在刁你，而是在避免頁面雖然看起來安全，實際卻從不安全管道載入資料。

所以這篇做法只適合：

1. 本機開發。
2. 內部測試。
3. 你明確知道風險的臨時除錯情境。

正式環境還是應該把前後端都整理成一致的 HTTPS。

可以怎麼暫時放寬

在 Chrome 或 Chromium 系瀏覽器中，可以對特定站台允許不安全內容：

1. 點擊網址列左側圖示。
2. 打開網站設定。
3. 找到「不安全的內容」或相近名稱的設定。
4. 改成「允許」。

上圖是設定入口示意。

上圖是將不安全內容改成允許的示意。

這個設定能解決什麼

它比較像是讓瀏覽器暫時不要擋你對該站的特定混合內容限制。適合用來快速驗證：

1. 前端程式本身有沒有正常送出請求。
2. API 是否真的可達。
3. 問題是不是純粹卡在瀏覽器安全策略。

如果這樣一開就通，通常代表你的業務邏輯可能沒問題，真正要修的是部署與憑證配置。

不要忽略的事

1. 這不是正式解法，只是開發期 workaround。
2. 只建議對特定測試站點開，不要整個瀏覽器全域放寬。
3. 測完記得改回來，避免之後誤判安全狀態。

最終還是該怎麼做

如果你可以控制環境，長期還是建議：

1. 前端、API 都統一走 HTTPS。
2. 內網也配置測試憑證。
3. 使用反向代理統一協定與來源。

這樣比每台開發機各自改瀏覽器設定穩定很多。

參考

如果你想看更多背景，可以參考這篇 StackOverflow 討論：

Page loaded over HTTPS but requested an insecure XMLHttpRequest endpoint - StackOverflow