HTTPS 页面加载 HTTP 瓦片，全被浏览器拦了

现象

浏览器控制台出现大量警告，地图区域只有背景色：

Mixed Content: The page at 'https://app.example.cn/map' was loaded over HTTPS,
but requested an insecure image 'http://tile.example.cn/12/3412/1420.png'.
This content should also be served over HTTPS.

部分较新的浏览器版本会直接升级或阻断请求，网络面板中瓦片状态为 (blocked:mixed-content)。

原因

HTTPS 页面不允许加载 HTTP 的子资源，图片、脚本、样式都算。 瓦片服务仍是 http:// 地址，或前端把协议写死成 http， 又或者反向代理只给主站配了证书，瓦片域名没有。

排查过程

1. 在网络面板按 blocked:mixed-content 过滤，列出所有被拦的地址。
2. 检查配置里写死的 http:// 字符串。
3. 直接访问瓦片域名，确认它本身是否支持 HTTPS、证书是否有效。

curl -I "https://tile.example.cn/12/3412/1420.png"
# 若返回 SSL 错误，说明该域名没有配置证书

解决方案

代码里不要写死协议，用页面自身的协议拼接，或直接使用同源相对路径：

var protocol = location.protocol === 'https:' ? 'https:' : 'http:';
var tileUrl = protocol + '//tile.example.cn/{z}/{x}/{y}.png';

L.tileLayer(tileUrl, { maxZoom: 18 }).addTo(map);

更稳的做法是把瓦片服务挂到同一域名下，通过反向代理统一入口， 证书只需要维护一张：

server {
    listen 443 ssl http2;
    server_name app.example.cn;

    ssl_certificate     /etc/ssl/app.example.cn.pem;
    ssl_certificate_key /etc/ssl/app.example.cn.key;

    location /tiles/ {
        proxy_pass http://127.0.0.1:8080/tiles/;
        proxy_set_header Host $host;
        add_header Cache-Control "public, max-age=86400";
    }
}

存量地址太多、短期改不完时，用 CSP 让浏览器自动把 http 升级为 https。 前提是目标域名确实支持 HTTPS，否则会变成连不上：

add_header Content-Security-Policy "upgrade-insecure-requests" always;

验证

控制台不再出现 Mixed Content 警告。 网络面板中所有瓦片请求的协议都是 https，状态 200。 底图完整显示，缩放到各级别均无空白块。