加了upgrade-insecure-requests后图片/JS/CSS全部404，根本原因是该指令强制将HTTP请求升级为HTTPS，但目标HTTPS资源实际不可用（如未配SSL证书、CDN未开TLS、Nginx未监听443），且浏览器不回退到HTTP，导致请求直接失败。
upgrade-insecure-requests 不是“自动升级”的万能开关，它只在特定条件下生效，且极易因环境错配导致资源加载失败、白屏或意外扣费。直接加 <meta> 标签就以为万事大吉，是线上事故高发原因。
为什么加了 upgrade-insecure-requests 后图片/JS/CSS 全部 404？
根本原因是：该指令仅改写「页面主动发起的资源请求」，但改写后不会回退 —— 如果目标 URL 的 HTTPS 版本实际不可用（比如 CDN 没配 HTTPS、对象存储未开启 TLS、Nginx 未监听 443），请求直接失败，浏览器不尝试 HTTP 回退。
- 常见于本地开发：HTML 里写了
http://localhost:8080/static/app.js，又加了upgrade-insecure-requests，浏览器强行发https://localhost:8080/static/app.js→ 连接拒绝 - 也见于静态资源硬编码：模板中输出
<img src="http://cdn.example.com/logo.png">，CSP 无法升级跨域绝对 URL（除非同源或相对路径） -
<link rel="preload">和<link rel="prefetch">中的http://地址，在 CSP 解析前已触发预加载，升级无效，直接被阻止
什么时候该用响应头而不是 <meta>？
<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests"> 在 HTML 解析阶段才生效，而响应头 Content-Security-Policy: upgrade-insecure-requests 由服务器在返回 HTML 前就发出，优先级更高、覆盖更稳。
- 使用
<meta>的典型误用场景：开发环境跑http://localhost:3000，但 HTML 中混入了线上http://api.example.com接口地址 → 浏览器升级成https://api.example.com，但开发机没配证书，请求卡死 - 响应头方式更适合部署态：Nginx 配置中统一加
add_header Content-Security-Policy "upgrade-insecure-requests";，可配合if ($scheme = http) { ... }条件控制，避免误用于纯 HTTP 环境 - 注意：Chrome 会发送
Upgrade-Insecure-Requests: 1请求头，服务端可据此做动态适配（如重定向），但这和 CSP 的升级行为无关
为什么升级后第三方资源反而加载失败？
upgrade-insecure-requests 会无差别升级所有非导航类 http:// 请求，包括跨域资源 —— 但很多第三方服务（如老版图床、监控 SDK、广告 JS）根本不支持 HTTPS，或证书配置错误。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 典型现象：
<img src="http://pal3.roogames.com/icon.png">升级为https://pal3.roogames.com/icon.png→ 返回 403 或证书错误 → 图片空白 - 更隐蔽的问题：部分服务（如 LeanCloud 文件存储）对 HTTPS 流量单独计费，HTTP 请求被升级后产生额外 HTTPS 出口流量，导致“免费额度突然耗尽”
- 验证方法：打开 DevTools → Network → 找一个原为
http://的请求，看其实际 Request URL 是否已变https://，再检查 Status 和 Security 标签页中的证书详情
上线前必须检查的三件事
加了 upgrade-insecure-requests 不等于完成 HTTPS 迁移，它只是过渡手段，真正要解决的是资源链接本身的安全性。
立即学习“前端免费学习笔记（深入）”；
- 所有静态资源链接必须支持 HTTPS：检查 HTML 模板、构建产物（
dist/）、CDN 配置、对象存储 Bucket 的 HTTPS 开关 - 禁用开发环境的该策略：Webpack/Vite 的 index.html 模板中，用条件变量包裹
<meta>，确保process.env.NODE_ENV === 'production'才注入 - 搭配
Content-Security-Policy-Report-Only先灰度：例如Content-Security-Policy-Report-Only: default-src https:; report-uri /csp-report，收集哪些资源被升级失败，再针对性修复
http:// 的图、哪个硬编码的接口、哪段被忽略的 warning，会在某个深夜变成 404 或账单上的 0.01 元。 
