HTTPS页面加载HTTP资源会被浏览器静默阻止，定位需查Chrome DevTools的Console或Security标签页；修复应优先确认目标域名是否支持HTTPS，再改用https://、协议相对URL（//）或同源HTTPS子域，后端须透传X-Forwarded-Proto头并用框架安全函数生成URL。
HTTPS 页面里加载 HTTP 资源会直接被浏览器阻止
现代浏览器（Chrome、Firefox、Edge）默认将 http:// 资源视为“混合内容”（mixed content），只要页面是 https://，所有 http:// 的 <script>、<iframe>、<img>、<audio>、<video> 请求都会被主动拦截——不是警告，是静默失败。用户看不到资源，控制台只报 Mixed Content: The page at 'https://...' was loaded over HTTPS, but requested an insecure resource 'http://...'.
怎么快速定位哪些资源触发了混合内容？
打开 Chrome DevTools → Console 标签页，直接看红色错误行；更高效的是切到 Security 标签页，点 “Mixed Content” 展开，它会列出所有被阻止的 http:// URL 及其加载位置（比如第 42 行 <img src="http://cdn.example.com/logo.png">）。
常见藏匿点：
-
<img src="http://...>或background: url(http://...)写死在 CSS 里 - 第三方 JS SDK 初始化时硬编码了
http://接口地址（如旧版百度统计、某些广告脚本） - 后端模板拼接 URL 时没判断协议，例如
"http://" + domain + "/api" - 富文本编辑器存的 HTML 片段含
http://图片链接
修复方案优先级：从安全和兼容性出发
别用 http:// 改成 https:// 这种简单替换——目标域名可能根本没配 HTTPS，会直接 404 或证书错误。正确顺序是：
立即学习“前端免费学习笔记（深入）”；
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 先确认目标域名是否支持 HTTPS：访问
https://your-cdn-domain.com/test.jpg，看能否正常加载且证书有效（无NET::ERR_CERT_INVALID） - 支持 HTTPS 的，统一把
http://换成https://；不支持的，要么升级对方服务，要么换 CDN - 更稳妥的做法是用协议相对 URL：
//cdn.example.com/logo.png—— 浏览器会自动继承当前页面协议。但注意：该写法在本地文件（file://）或 HTTP/2 Server Push 场景下可能异常，生产环境可用 - 绝对推荐方案：所有资源走同一主域或已备案的 HTTPS 子域，避免跨源混合内容问题
后端渲染页面时如何避免硬编码 HTTP 协议？
很多混合内容问题其实出在服务端。比如 PHP 模板里写 <img src="http://<?php echo $host; ?>/logo.png">，或 Java 中用 request.getScheme() 但没校验反向代理头。
关键检查点：
- Nginx/Apache 是否透传了
X-Forwarded-Proto头？否则后端永远读到http（即使用户访问的是 HTTPS） - 框架是否配置了信任代理 IP？Spring Boot 需设
server.forward-headers-strategy=framework；Laravel 要调用Illuminate\Http\Request::setTrustedProxies() - 生成 URL 时优先用
url()（Laravel）、UrlHelper::to()（Yii）等内置函数，它们会自动适配当前协议
最保险的底线：静态资源路径全部走相对路径（/static/logo.png）或根相对路径（//cdn.example.com/logo.png），彻底绕过协议判断逻辑。
混合内容不是“能跑就行”的小问题——它让整个 HTTPS 的加密链路形同虚设。哪怕只有一个 http:// 的 <script>，攻击者就能劫持那个请求，注入恶意代码。修复时别只盯着前端 HTML，后端协议感知和 CDN 支持才是关键卡点。
