加crossorigin属性没用是因为它只启用CORS请求模式，但服务端未返回Access-Control-Allow-Origin响应头时，浏览器会静默丢弃样式；@import不支持crossorigin且无法携带凭据，更易失败；唯一可控方式是<link>配合服务端完整CORS配置（含Vary: Origin）及字体等子资源单独配头。
为什么加crossorigin属性没用
加了 crossorigin="anonymous" 后样式还是不生效，不是前端写错了，而是浏览器根本没把响应当“可读资源”——CSS 跨域加载失败时是静默丢弃，控制台可能只显示 Failed to load resource: net::ERR_BLOCKED_BY_CLIENT 或干脆没提示。关键点在于：crossorigin 只改变请求发起方式（启用 CORS 模式），但服务端若没返回 Access-Control-Allow-Origin 响应头，浏览器就会拒绝将样式应用到页面。
-
@import更危险：它不继承 HTML 的crossorigin属性，也无法携带凭据，服务端没配头就必然失败 -
link[rel=stylesheet]是唯一可控入口，但它不能绕过服务端限制 - CDN 或第三方托管的 CSS，比如
https://cdn.example.com/ui.css，必须由该域名的服务端配置响应头
nginx 配置 CSS 跨域响应头的关键细节
如果你能控制 CSS 所在服务器（如自建 CDN、静态资源站），直接在 nginx 的 location 块里加响应头是最稳妥方案。但漏掉任意一项都可能导致缓存污染或 304 下失效。
- 必须用正则精确匹配：
location ~ \.css$，避免把 CORS 头污染到 HTML/JS 接口 - 必须同时设置：
add_header Access-Control-Allow-Origin "*";（生产环境建议换为具体域名） - 必须加：
add_header Vary "Origin";，否则 CDN 或反向代理可能缓存带头响应并错发给非跨域请求 - 如果启用了 gzip，确保
add_header在gzip on之后仍生效（nginx 1.7.5+ 支持） - 不要加
Access-Control-Allow-Credentials: true—— CSS 请求不发 cookie，加了反而让Origin: *失效
前端 fallback：fetch + style 标签兜底
当你完全无法修改服务端（比如引用的是别人家的 iconfont CDN，且对方拒绝配 CORS），只能在前端用 fetch 主动拉取 CSS 文本，再注入 <style> 标签。这种方式绕过了 <link> 的样式隔离机制。
- 必须用
credentials: 'omit'（对应crossorigin="anonymous"），不能用include，否则会因凭据冲突被拒 - 响应类型要显式设为
text：response.text()，别用json()或自动解析 - 插入前建议加
try/catch，防止 CSS 语法错误导致整个<style>标签失效 - 示例片段：
fetch('https://cdn.example.com/style.css', { credentials: 'omit' })<br> .then(r => r.text())<br> .then(css => {<br> const s = document.createElement('style');<br> s.textContent = css;<br> document.head.appendChild(s);<br> });
字体文件也得单独配 CORS，和 CSS 不是一回事
CSS 文件里如果用了 @font-face 引入远程字体（如 .woff2），即使 CSS 本身跨域成功，字体仍会因缺少响应头被拦截，报错类似：No 'Access-Control-Allow-Origin' header is present on the requested resource。
立即学习“前端免费学习笔记（深入）”；
- 字体路径和服务端是独立的，比如 CSS 在
cdn.example.com，字体在fonts.example.com，那后者也得单独配 CORS - nginx 中要用
location ~ \.(woff2|woff|ttf|eot|otf)$精确匹配，并带上always标志：add_header Access-Control-Allow-Origin "*" always;，否则 304 响应不带头 - CDN 用户注意：确认 CDN 是否透传源站的
add_header，很多默认关闭，需手动开启“缓存响应头”选项 - 实在不行再考虑降级：把小图标字体转成 base64 写进 CSS，但会失去浏览器字体缓存能力
