症状
本篇指南处理“混合内容被阻止 — HTTPS 页面加载 HTTP 资源”。请从症状出发，按顺序执行诊断，在推进前确认每个假设；随后通过修复与验证步骤闭环。
可观察到的症状包括：
- Console: Mixed Content: 页面经 HTTPS 加载，但请求了不安全的 http 资源
- 图片、样式或脚本仅在生产静默加载失败
- 浏览器显示盾牌或锁警告图标
诊断
先在隔离环境中复现故障，再按顺序执行以下检查，逐步缩小范围。
步骤 1
DevTools → Console → filter "Mixed Content"每条都会指出被阻止的 URL 及其类型，精确指向需修复的资源。
步骤 2
grep -rn "http://" src/ public/模板、CSS 或配置中硬编码的不安全 URL 是常见原因。
常见诱因（按出现频率排序）：
- 子资源 URL 硬编码为 http://
- 引用的第三方 CDN 或 API 未使用 HTTPS
- HTTPS 页面中的 iframe 或表单提交到 http 端点
根因
为防止降级攻击，浏览器在 HTTPS 页面上阻止主动与被动混合内容。http 子资源会被拒绝，因此即便页面本身加载成功，该资源仍失败。
修复
让所有资源使用 HTTPS，更新硬编码的 http URL，使用协议相对或同源路径，并添加 CSP 的 upgrade-insecure-requests 指令自动升级残留的 http URL。
注意：upgrade-insecure-requests 会静默改写 URL；需确保目标确实支持 HTTPS，否则请求会以另一种方式失败。
# nginx: add HSTS and CSP upgrade directive
add_header Content-Security-Policy "upgrade-insecure-requests" always;
add_header Strict-Transport-Security "max-age=63072000; includeSubDomains" always;
<!-- use an HTTPS URL or a same-origin path -->
<script src="https://cdn.example.com/lib.js"></script>
<img src="/img/logo.png" alt="logo" />验证
重新加载并确认无混合内容警告且资源全部加载；浏览器锁图标应显示安全页面。
修复后补充一条回归测试，复现原始症状，防止问题再次出现。
这类故障通常是环境问题而非纯逻辑错误，因此在缺陷记录中应写明完整命令、环境变量与工作目录。请用最小的脚本复现，待最小用例清楚后再扩大范围。为这类故障准备一份简短的排查清单，能显著减少下次排障时间。