crossorigin="anonymous"是加载跨域CSS的必要条件，否则@font-face和background-image等子资源将被静默拦截，且onerror无法获取错误URL；@import不支持CORS，须改用带crossorigin的link标签；服务端需配置Access-Control-Allow-Origin与Vary: Origin配合，避免缓存导致CORS校验失败。
crossorigin="anonymous" 是加载跨域 CSS 的前提条件
不加 crossorigin 属性，浏览器就按“非 CORS 模式”加载 CSS，哪怕服务端返回了 Access-Control-Allow-Origin 响应头也无效。此时若 CSS 内含 @font-face 或 background-image: url() 等跨域子资源，浏览器会静默拦截——页面看似有样式，实则字体/图片全失效，控制台却可能只报一条模糊的 No 'Access-Control-Allow-Origin' header is present。
不加 crossorigin 就捕获不到真实错误信息
没加 crossorigin 的跨域 CSS 加载失败时，onerror 事件触发但 event.target.href 为空、event.error 是空对象，无法定位具体是哪个 URL 出问题。加上 crossorigin="anonymous" 后，只要服务端响应头匹配，就能拿到完整 event.target.href，配合 Network 面板可快速确认是主 CSS 还是其中某个 url() 资源被拦。
@import 跨域必然失败，必须改用带 crossorigin 的 link
@import 语法不支持声明 crossorigin，也不触发 CORS 协商流程，浏览器直接将其响应视为“不透明（opaque）”，CSS 引擎跳过解析，整个规则块被丢弃。唯一可靠方案是：
- 把所有
@import替换为<link rel="stylesheet" href="..." crossorigin="anonymous"> - 确保每个被引用的 CSS 文件（包括它内部的
url()所指字体、图片）都托管在配好 CORS 响应头的服务端 - 注意：CDN 上的 CSS 若带查询参数（如
?v=2.1），要确认缓存策略透传了Access-Control-Allow-Origin头
服务端配置漏掉 Vary: Origin 就可能线上偶发失败
很多团队只加了 Access-Control-Allow-Origin，却忽略 Vary: Origin。一旦 CDN 或反向代理缓存了某次响应（比如来自 https://a.com 的请求），再把该缓存返回给 https://b.com，就会因 Origin 不匹配导致 CORS 校验失败——现象是部分用户白屏或字体缺失，复现困难。Nginx 中必须这样写：
立即学习“前端免费学习笔记（深入）”；
location ~* \.(css|woff2|woff|ttf|eot)$ {
add_header Access-Control-Allow-Origin "*";
add_header Vary "Origin";
add_header Access-Control-Allow-Methods "GET";
}别在 server 级全局加，避免污染 HTML/JS 接口；也别给 CSS 加 Access-Control-Allow-Credentials: true，它不发 Cookie，加了反而让 Access-Control-Allow-Origin: * 失效。
