加了crossorigin仍报cors错误，是因为浏览器严格按cors流程发起请求，而服务端未返回access-control-allow-origin响应头；必须在nginx等服务器上针对.css及.woff2/.ttf等字体后缀分别配置cors头，并添加always和vary: origin。
为什么加了 crossorigin 还报 CORS 错误
加了 crossorigin="anonymous" 却控制台仍报 No 'Access-Control-Allow-Origin' header is present，不是前端写错了，而是服务端根本没返回对应响应头。浏览器看到 crossorigin 就会严格走 CORS 流程，但若服务端响应里没有 Access-Control-Allow-Origin，请求直接被拒绝——连 CSS 内容都不会解析。
常见漏配点：
- 只给 API 接口配了 CORS，静态资源目录（如
/static/css/或 CDN 的.css路径）完全没加 - Nginx 配置写在
server块顶层，导致 HTML/JS 也带上了 CORS 头，引发兼容性问题 - 字体文件（
.woff2、.ttf）没单独配置，而@font-face中的url()会触发二次跨域校验
<link> 的 crossorigin 属性怎么设才不翻车
crossorigin 不是“开关”，它是告诉浏览器“请用 CORS 模式发这个请求”。设错反而让原本能加载的 CSS 彻底失效。
选值原则：
- 绝大多数情况用
crossorigin="anonymous"：不带 Cookie，服务端可返回Access-Control-Allow-Origin: *或精确域名 - 只有当 CSS 请求需携带登录态 Cookie（极少见）时，才用
crossorigin="use-credentials"；此时服务端必须返回Access-Control-Allow-Origin: https://your-domain.com（不能是*）+Access-Control-Allow-Credentials: true - 写成
<link crossorigin>等价于anonymous，但建议显式写出，避免团队理解偏差
绝对别这么写：<link rel="stylesheet" href="https://cdn.example.com/style.css" crossorigin="use-credentials"> —— 如果服务端没配凭证头，这个 CSS 一定白屏。
Nginx 配 CSS 和字体文件的 CORS 头要分两块写
CSS 文件和它引用的字体是不同资源，Nginx 必须分别匹配后缀，不能靠一个通配规则糊弄过去。
正确写法（针对 CSS）：
location ~* \.css$ {
add_header Access-Control-Allow-Origin "*" always;
add_header Vary "Origin" always;
add_header Access-Control-Allow-Methods "GET" always;
}
正确写法（针对字体）：
location ~* \.(woff2?|ttf|eot|otf)$ {
add_header Access-Control-Allow-Origin "*" always;
add_header Vary "Origin" always;
add_header Access-Control-Allow-Methods "GET" always;
}
关键细节：
- 必须加
always，否则 gzip 后头可能丢失 -
Vary: Origin不能省，否则 CDN 缓存会把 A 域的响应返回给 B 域 - 不要给 CSS 或字体加
Access-Control-Allow-Credentials: true，它们从不发 Cookie，加了反而让*失效
@import 跨域 CSS 必然失败，别挣扎
@import url("https://other-domain.com/style.css"); 在跨域场景下永远失败，不是配置问题，是浏览器设计如此。
原因很硬核：
-
@import不支持声明crossorigin，浏览器无法启动 CORS 协商流程 - 即使服务端返回了正确的
Access-Control-Allow-Origin，浏览器也会把响应视为 “opaque”（不透明），CSS 引擎直接丢弃内容，不报错也不渲染 - 控制台可能只显示模糊的
net::ERR_FAILED，或干脆静默失败
唯一解法：删掉所有 @import，改用 <link rel="stylesheet" href="..." crossorigin="anonymous">。如果第三方库强制用 @import（比如某些老 UI 框架），只能联系对方升级，或自己 fork 后替换为 <link>。
真正容易被忽略的是：CORS 头必须由托管 CSS 和字体的服务器发出，前端加再多属性都只是“发起请求的方式”，不是“绕过限制的钥匙”。配错位置、漏配字体、缓存污染，三者任一都会让页面样式半残——看着加载成功，实则关键规则全丢。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
