浏览器拦截css的根本原因是代理篡改了content-type响应头，使其变为text/plain或application/octet-stream而非text/css；需在network面板中检查css请求的response headers确认，优先在代理工具中禁用对.css的自动重写规则并服务端显式设置content-type。
为什么代理会拦截加载的CSS
代理（尤其是企业内网代理、开发代理如Charles/Fiddler、或某些HTTPS中间人工具）会拦截并重写HTTP响应，导致CSS文件返回的Content-Type被篡改为text/plain或application/octet-stream，浏览器因此拒绝将其解析为样式表——现象是Network面板里请求状态码200，但Elements面板Styles栏为空，控制台无报错。
检查是否被代理篡改Content-Type
打开开发者工具 → Network → 筛选css → 点击对应请求 → 查看Response Headers里的content-type值。合法值应为text/css；若显示text/plain、application/octet-stream或缺失该头，则确认是代理拦截所致。
- 本地用
python -m http.server起的服务通常不受影响，可作对照基准 - Chrome 浏览器地址栏输入
chrome://net-internals/#events，筛选URLRequest事件，搜索content-type字段变更点 - 若使用Fiddler/Charles，检查其“Auto-Respond”或“Breakpoints”规则是否误匹配了
.css路径
绕过代理拦截的实操办法
不推荐全局关闭代理，而是针对性修复传输链路。优先级从高到低：
- 在代理工具中禁用对
.css后缀的自动重写规则（Fiddler：Rules → Customize Rules → 搜索statics或css；Charles：Proxy → SSL Proxying Settings → 取消勾选CSS相关域名） - 服务端明确设置
Content-Type: text/css响应头（Node.js用res.setHeader('Content-Type', 'text/css')；Nginx加types { text/css css; }） - 开发时改用
file://协议+本地服务器替代直接双击HTML（避免代理劫持file协议） - 临时加
type="text/css"属性（虽HTML5已冗余，但部分老旧代理会据此触发类型识别逻辑）：<link rel="stylesheet" href="/css/main.css" type="text/css">
CDN或第三方CSS被代理拦截怎么办
当引入href="https://cdn.example.com/style.css"仍失效，大概率是代理强制将HTTPS降级为HTTP，或证书校验失败导致连接中断。
- 检查Network面板中该请求的
Protocol列是否为http/1.1而非h2或http/3，降级即线索 - 浏览器地址栏左上角锁形图标点开，看是否提示“连接不安全”或证书由内部CA签发
- 临时切换代理模式：Chrome启动时加参数
--proxy-server="direct://"跳过系统代理 - 避免在企业环境直接引用未备案的CDN域名；改用本地缓存副本+根相对路径：
href="/vendor/bootstrap.css"
Content-Type——你盯着CSS规则反复检查语法，却没打开Response Headers看那一行关键头。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
