混合内容
快速摘要
你的页面是 HTTPS 的,但里面引用了 `http://` 的图片、脚本或接口,浏览器出于安全考虑会拦截。
为什么发生
页面是 HTTPS,但图片/脚本/CSS 用了
http://协议第三方接口地址还是
http://,没有升级到 HTTPS旧代码迁移到 HTTPS 后,硬编码的
http://没改
最小示例
✗ 错误代码
<img src="http://example.com/photo.jpg" alt="图">✓ 修复代码
<img src="https://example.com/photo.jpg" alt="图">HTTPS 页面里加载 http:// 图片会被浏览器阻止。把 src 改成 https:// 即可。
如何诊断
在浏览器控制台查找 Mixed Content 警告,它会指出具体的资源 URL
在 Network 面板查看被阻止的请求及其协议
搜索代码中所有
http://引用,确认是否需要改成https://
如何修复
把所有资源引用从
http://改成https://使用协议相对 URL
//example.com/...或直接用https://联系第三方服务方,要求提供 HTTPS 端点
如何预防
新项目从一开始就全站 HTTPS,所有引用都用
https://用 CSP(Content-Security-Policy)的
upgrade-insecure-requests自动升级