启用 upgrade-insecure-requests 指令可让浏览器自动将 http 图片链接升级为 https，避免混合内容错误；需在 nginx https server 块中添加含该指令的 content-security-policy 响应头，并确保证书有效、cdn 支持 https、清除缓存验证生效。
直接在 Nginx 的 HTTPS server 块中添加 Content-Security-Policy 响应头，启用 upgrade-insecure-requests 指令，就能让浏览器自动把页面里所有 http:// 图片链接升级为 https:// 发起请求，无需改前端代码。
为什么图片会触发混合内容错误
当你的网站通过 HTTPS 加载时，浏览器要求所有子资源（包括 img 标签的 src、CSS 中的 background-image、甚至 iframe 的 src）也必须走 HTTPS。如果 HTML 或样式中写的是 http://cdn.example.com/logo.jpg，哪怕图片本身能被正常访问，现代浏览器（Chrome/Firefox/Safari）也会拦截并报错：
- Mixed Content: The page at 'https://...' was loaded over HTTPS, but requested an insecure image 'http://...'
- 这类属于“被动混合内容”，部分浏览器可能只警告不阻断，但新版已默认阻止
最稳妥的 Nginx 解决方案
在对应 HTTPS 的 server 配置块中加入以下响应头（放在 location 外或 server 级均可）：
add_header Content-Security-Policy "upgrade-insecure-requests; default-src 'self'; img-src 'self' data: https:;" always;
-
upgrade-insecure-requests是核心：强制浏览器将所有 http:// 请求升为 https:// -
img-src 'self' data: https:明确允许图片只从自身域名、data URL 或 HTTPS 地址加载，进一步收紧策略 -
always参数确保 304、200 等所有响应都带上该头（避免缓存导致缺失）
配套检查项（避免遗漏）
单加 CSP 头虽快，但需同步确认以下几点，否则仍可能失败：
- 确保 Nginx 已正确加载 SSL 模块（
nginx -V | grep http_ssl_module有输出） - 检查证书链完整：若图片来自第三方 CDN（如
http://static.example.com），仅靠 upgrade 不够——该域名自身也得支持 HTTPS，否则升级后仍是 404 或证书错误 - 清除浏览器缓存再测试：旧页面可能缓存了未带 CSP 头的响应，硬刷新（Ctrl+Shift+R）或禁用缓存调试
- 验证响应头是否生效：用浏览器开发者工具 > Network > 刷新页面 > 点任意 HTML 请求 > 查看 Response Headers 中是否有
Content-Security-Policy
临时替代方案（不推荐长期使用）
如果 CSP 头因某些老旧浏览器兼容性问题暂不可用，可考虑：
- 在 HTML
中加 meta 标签：<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">（注意：仅对当前页面生效，且无法控制 img-src 等细化策略） - 用 Nginx 的 sub_filter 替换响应体中的 http:// 链接（需开启
sub_filter模块，且仅适用于文本响应，对压缩/二进制资源无效）
