Vue内网项目HTTPS引入CDN资源，为何浏览器会改用HTTP加载？

核心现象 #

项目中明确通过HTTPS引入unpkg库：

import { encode as encodeJPEG } from "https://unpkg.com/@jsquash/jpeg@1.4.0?module";

但偶尔出现浏览器发起HTTP请求http://unpkg.com/@jsquash/jpeg@1.4.0/index.js?module的情况，触发混合内容拦截，刷新页面后恢复正常。

可能的原因 #

• unpkg CDN临时跳转异常：unpkg处理请求时会自动做版本解析和资源跳转，偶尔因CDN节点缓存同步延迟、路由故障，会返回HTTP协议的跳转地址。浏览器遵循跳转规则发起请求，就触发了混合内容拦截。刷新后请求被分配到正常节点，跳转地址恢复HTTPS，问题消失。
• 浏览器跳转缓存污染：如果之前项目曾用HTTP请求过该资源，或者CDN曾经返回过HTTP跳转，浏览器可能缓存了旧的跳转记录。某次请求复用了缓存的HTTP跳转地址，导致错误。刷新后缓存失效，重新请求得到正确的HTTPS跳转。
• 内网网关/代理临时篡改：公司内网的代理服务器、防火墙或网关，可能在转发请求时临时出现配置波动，篡改了CDN返回的响应头，把HTTPS跳转地址改成了HTTP。这种波动通常是临时性的，所以刷新后请求路径恢复正常。

已验证的解决方案 #

将库打包为内部资源彻底规避了CDN依赖的不确定性，是最稳定的方案。另外添加upgrade-insecure-requests的Meta头也是有效的兜底手段，能强制浏览器将所有HTTP请求升级为HTTPS：

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

内容的提问来源于stack exchange，提问作者Donggi Kim