浏览器将http css视为主动混合内容而直接拦截，因其可通过:before/:after、@import、url()等特性被篡改并劫持渲染逻辑；chrome等现代浏览器不发请求、不警告，仅在network面板标记blocked:mixed-content。
因为浏览器把 HTTP CSS 视为主动型混合内容（active mixed content），会直接阻断请求，不发出去，也不加载——这不是加载失败，是策略性丢弃。
为什么浏览器要这么狠
CSS 不只是改颜色和间距。它能通过 :before/:after 注入内容、用 content: url() 加载远程资源、配合 @import 动态拉取子样式、甚至影响 getComputedStyle() 和布局计算。一旦被中间人篡改，整个页面渲染逻辑和用户交互都可能被劫持。
所以 Chrome、Firefox、Edge 等现代浏览器不会警告，而是直接标记为 blocked:mixed-content，Network 面板里该请求的 Status 列就写着这个状态，Initiator 为空，Size 是 0 KB。
- HTTP 图片属于“被动混合内容”，浏览器可能只降级显示（比如去掉小锁图标）
- HTTP CSS、JS、XHR、Fetch 属于“主动混合内容”，一律拦截，无商量余地
- 哪怕你的 HTTPS 页面是
https://localhost:3000，引用http://127.0.0.1:8080/style.css同样被拦——协议不一致即风险
你以为在加载，其实根本没发请求
很多人翻控制台看到红字报错，就去检查网络连通性、CDN 是否可用、路径是否写错……但问题根本不在“能不能收到”，而在“浏览器压根不发”。你看到的 Mixed Content 错误不是服务端返回的，是浏览器自己写的日志。
- 打开 DevTools → Network → Filter 输入
mixed，所有被拦的 HTTP 资源会高亮显示 - 点击任一被拦项 → 查看 Initiator 列，能反查到是哪行
<link>或 JS 动态插入导致的 - 如果 Initiator 是
other，说明来自 HTML 源码；如果是某 JS 文件，则要顺藤摸瓜查它生成的link标签
CSS 文件内部的 @import 和 url() 也会被拦
HTML 里 <link href="https://..."> 写对了，不代表万事大吉。CSS 文件本身也可能藏着危险链接：
@import url("http://fonts.googleapis.com/css?family=Open+Sans");.icon { background: url("http://cdn.example.com/icon.png"); }- 这类请求在 Network 面板里是子请求，Status 同样是
blocked:mixed-content - 它们不会出现在 HTML 源码中，必须打开对应 CSS 文件逐行 grep
http://
协议相对 URL（//）不是万能解药
把 http://cdn.example.com/style.css 改成 //cdn.example.com/style.css 看似省事，但隐患不少：
- 如果 CDN 实际不支持 HTTPS（比如某些内网静态服务），浏览器会尝试发 HTTPS 请求，结果 404
- 部分老旧代理或企业防火墙会把
//解析成本地路径，导致请求失败 - 当 CSS 有 query 参数（如
?v=1.2.3）时，//写法在某些 CDN 上可能触发缓存异常或签名失效 - 现代浏览器和主流 CDN（如
jsdelivr.net、unpkg.com）全量支持 HTTPS，硬写https://更可靠
最容易被忽略的是 CSS 文件里的 @import 和 url() ——它们藏得深、查得难，但只要存在一个，整张样式表就可能白加载。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
