This request has been blocked; the content must be served over HTTPS.此請求已被阻止；內容必須透過HTTPS提供

近期在做將高德地圖替換為天地圖時遇到了這個問題，原因是https由於安全協議禁止了http的請求

http://api.tianditu.gov.cn/api?v=4.0&tk=XXXXXXX

可以透過以下方法解決

1.在.html中新增

<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">

2.在APP.vue中新增

const meta = document.createElement('meta')
meta.httpEquiv = 'Content-Security-Policy'
meta.content = 'upgrade-insecure-requests'
document.head.appendChild(meta)

原理：

這是一個 HTML 元標籤，用於設定內容安全策略（Content Security Policy，CSP）。

“upgrade-insecure-requests” 指令的含義是將所有透過 HTTP 發起的請求自動升級為 HTTPS 請求。這有助於提高網站的安全性，確保資料在傳輸過程中被加密，防止中間人攻擊和資料洩露等安全風險。例如，當頁面中存在指向 HTTP 資源（如圖片、指令碼、樣式表等）的連結或請求時，瀏覽器會自動將這些請求轉換為 HTTPS 請求，前提是目標伺服器支援 HTTPS。如果伺服器不支援 HTTPS，請求可能會失敗。此策略可促使網站逐步向全 HTTPS 環境過渡，提升整體安全性和使用者隱私保護水平。