最直接有效的方式是在Nginx HTTPS server块中添加add_header Content-Security-Policy "upgrade-insecure-requests" always;，使浏览器自动将HTTP资源请求升级为HTTPS，无需修改前端代码，且仅对同域名HTTP资源生效。
HTTPS 环境下页面引用 HTTP 资源会触发浏览器“混合内容（Mixed Content）”拦截，导致图片、脚本、样式等加载失败，页面功能异常或显示不全。这不是跨域问题，而是协议降级引发的安全策略阻断。
启用 upgrade-insecure-requests 安全头
这是最直接有效的解决方式：让浏览器自动将所有 HTTP 资源请求升级为 HTTPS。只需在对应 server 或 location 块中添加：
- add_header Content-Security-Policy "upgrade-insecure-requests" always;
- 该头对整个页面生效，无需逐个修改资源链接
- 兼容主流现代浏览器（Chrome 43+、Firefox 48+、Safari 10.1+）
- 注意：仅适用于同域名下的 HTTP 资源；跨域 HTTP 资源仍会被拦截，需后端配合改用 HTTPS
检查并修复资源 URL 协议一致性
前端代码中的硬编码 HTTP 链接是根本原因，必须清理：
- 将
http://cdn.example.com/js/app.js改为https://cdn.example.com/js/app.js - 使用协议相对 URL（
//cdn.example.com/js/app.js）可自动继承当前页面协议，但仅适用于同协议场景，且现代开发中已不推荐 - 模板渲染时用变量动态拼接协议（如
{{ protocol }}://api.example.com），确保后端注入 https - 构建工具（Webpack/Vite）可通过
publicPath或环境变量统一控制资源前缀
反向代理补救（适用于无法修改前端的情况）
若前端静态资源托管在第三方 HTTP 服务，且短期内无法改造，可在 Nginx 层做透明代理并强制 HTTPS 回源：
- 配置 location 匹配资源路径，proxy_pass 到目标 HTTP 地址（如
http://legacy-cdn.com/） - 添加
proxy_set_header X-Forwarded-Proto https;和proxy_ssl_verify off;（仅测试环境，生产建议配可信证书） - 关键：响应头中必须设置
Content-Security-Policy: upgrade-insecure-requests，否则浏览器仍视为混合内容 - 此方案增加延迟和运维复杂度，应作为临时过渡手段
补充安全加固项
避免引入新风险：
- 禁用
server_tokens on;，防止泄露 Nginx 版本信息 - 配置 HSTS 头（
add_header Strict-Transport-Security "max-age=31536000; includeSubDomains" always;），强制后续访问走 HTTPS - 检查 Nginx 日志中是否有
Mixed Content相关告警，定位残留 HTTP 请求 - 使用浏览器开发者工具 → Console 或 Security 标签页，实时查看混合内容警告及被拦截的资源
