必须服务端配置access-control-allow-origin响应头且前端link标签显式声明crossorigin="anonymous"或"use-credentials"，二者缺一不可；@import因无法触发cors协商必然失败。
浏览器拦截跨域 CSS 不是因为请求没发出去，而是发出去了、服务器也返回了 200，但浏览器在解析阶段直接丢弃内容——必须服务端配响应头 + 前端 link 标签显式声明 crossorigin，二者缺一不可。
为什么加了 crossorigin 还是没样式？
因为 crossorigin 只是“告诉浏览器：请走 CORS 流程”，它不解决服务端是否放行的问题。浏览器拿到响应后会检查 Access-Control-Allow-Origin 头，不匹配就静默丢弃 CSS 文本，控制台可能只有一条模糊的 Failed to load resource: net::ERR_BLOCKED_BY_CLIENT 或干脆没提示。
- 常见误判：看到 Network 面板里 CSS 请求状态是 200，就以为成功 —— 实际上样式引擎根本没读它
-
@import跨域必然失败，它无法声明crossorigin，也不触发 CORS 协商，浏览器直接视为不透明响应 - 只在
link上写crossorigin（无值）语义模糊，应明确写成crossorigin="anonymous"或crossorigin="use-credentials"
Nginx 配置 CSS 跨域头最容易漏的三处
配置位置和组合错误会让 CORS 头形同虚设。Laravel、Vue 打包产物等放在 /public 下的 CSS，PHP 中间件完全不生效，必须由 Nginx 直接注入头。
- 必须用
location ~* \.css$精确匹配，不能只配在server或root块里——否则头不会出现在 CSS 响应中 - 必须加
always参数：add_header Access-Control-Allow-Origin "https://your-app.com" always;，否则 304/404 响应不带 CORS 头 - 必须加
add_header Vary "Origin";，否则 CDN 或反向代理可能缓存带头的响应并错误返回给非跨域请求
字体图标显示为方块？查 font 请求的响应头
CSS 文件能加载，但图标是方块或问号，问题大概率出在 @font-face 引用的字体文件（.woff2、.ttf 等）被拦截——它和 CSS 是两个独立请求，需单独配 CORS。
- 打开 DevTools → Network → 筛选
font，点开 woff2 请求，看 Response Headers 里有没有Access-Control-Allow-Origin - 前端 CSS 中的
@font-face必须显式加crossorigin: anonymous;，否则浏览器仍以非 CORS 模式发起字体请求 - CDN 控制台配 CORS 规则时，Allowed Origin 必须填精确域名（如
https://your-app.com），不能只写*（尤其当字体请求需带 cookie 时）
HTTPS 页面加载 HTTP CSS 被拦，不是报错而是根本不发请求
现代浏览器对混合内容（mixed content）执行硬性阻断：href="http://cdn.example.com/style.css" 的 link 标签，Network 面板里 Status 列会直接显示 blocked:mixed-content，且没有后续子请求。
- 别信协议相对路径
//cdn.example.com/style.css—— 若 CDN 不支持 HTTPS，会 404；若支持但证书异常，也会失败 - CSS 文件内部的
@import url("http://...")和url("http://...")同样被拦，得逐行检查 CSS 内容 - 快速定位所有混合内容：DevTools Network → Filter 输入
mixed，按Initiator列反查源头
最常被忽略的是：CORS 配置生效后，字体文件和 CSS 文件必须各自独立满足条件——一个配了，另一个没配，图标照样不显示；而本地开发用 file:// 协议时，连 Content-Type: text/css 都不存在，此时 CORS 已是次要矛盾。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
