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 环境过渡，提升整体安全性和用户隐私保护水平。