@import跨域CSS会触发CORS错误，因其不发送凭据且无法声明crossorigin，导致响应被丢弃；应改用支持crossorigin属性的标签，并确保服务端正确配置Access-Control-Allow-Origin等响应头。
为什么 @import 加载外部 CSS 会触发 CORS 错误
浏览器对 @import 加载跨域 CSS 的限制比 <link> 更严格——它默认不发送凭据，且服务端未显式声明 Access-Control-Allow-Origin 时，即使资源能被下载，样式也不会生效，控制台报 CORS policy: No 'Access-Control-Allow-Origin' header is present。
根本原因不是“不能请求”，而是“请求成功但被浏览器丢弃”：CSS 解析阶段需要完整读取内容并执行，而跨域资源若缺少响应头，会被视为不透明（opaque）响应，无法被 CSS 引擎消费。
-
@import是 CSS 层面的加载机制，不继承 HTML 文档的crossorigin属性，也无法携带credentials - CDN 或静态资源服务默认不返回
Access-Control-Allow-Origin: *，尤其当响应含 cookie 或认证头时，*被禁止，必须指定具体源 - 即使加了
Access-Control-Allow-Origin，若服务端还返回了Vary: Origin，而缓存未区分 Origin，可能造成后续请求命中错误缓存
用 <link rel="stylesheet"> 替代 @import 的实际效果
<link> 支持 crossorigin 属性，能主动声明跨域行为，让浏览器按预期发起带 CORS 的请求，并正确处理响应头。这是唯一可控、可调试的跨域 CSS 加载方式。
Web Accessibility (WCAG 2 AA))
下载
将 WCAG 2 AA 无障碍标准应用于设计系统、UI 组件和网页——通过可运行的验证器进行对比度计算，采用设计 token 模式使颜色天生可访问，设定排版和焦点状态规则，并提供语义检查清单。适用于构建或审查 UI。
- 写法：
<link rel="stylesheet" href="https://cdn.example.com/style.css" crossorigin="anonymous"> -
crossorigin="anonymous"表示不带 cookie 和 HTTP 认证信息；若需带凭证（如内网 SSO），改用crossorigin="use-credentials"，但服务端必须匹配返回Access-Control-Allow-Origin具体域名 +Access-Control-Allow-Credentials: true - 注意：Chrome 对
crossorigin值大小写敏感，"ANONYMOUS"无效，只认小写"anonymous" - 如果服务端只返回
Access-Control-Allow-Origin: *，则必须用anonymous模式；一旦用了use-credentials，*就不合法，必须写死源地址
服务端配置 Access-Control-Allow-Origin 的关键细节
光加响应头不够，顺序、组合和缓存策略都会影响结果。常见错误是只配了头，却忽略 Vary 或凭据冲突。
立即学习“前端免费学习笔记（深入）”；
- Nginx 示例配置中，必须同时设置：
add_header 'Access-Control-Allow-Origin' 'https://your-app.com';+add_header 'Vary' 'Origin';，否则 CDN 或代理可能复用为其他源生成的响应 - Apache 需启用
mod_headers，并在.htaccess或虚拟主机中写：Header set Access-Control-Allow-Origin "https://your-app.com"，避免用Header always set导致重复头 - 若后端是 Node.js（如 Express），不能只写
res.header('Access-Control-Allow-Origin', '*')，而要根据请求头Origin动态回写，否则在use-credentials场景下会失败 - 某些 CDN（如 Cloudflare）默认剥离自定义响应头，需在页面规则中显式开启 “Cache Level: Bypass” 或添加“允许通过”的头白名单
本地开发时绕过 CORS 的临时方案与风险
开发阶段用浏览器插件或命令行参数禁用 CORS，只是掩盖问题，不能替代真实配置。上线前必须验证服务端响应头是否生效。
- Chrome 启动时加
--disable-web-security --user-data-dir=/tmp/chrome-dev仅限单机调试，且新版 Chrome 已限制该参数在非安全上下文中的作用 - VS Code Live Server 插件默认不支持跨域，需手动改配置或换用
serve：npx serve -s -c cors.json，其中cors.json包含{"headers": {"Access-Control-Allow-Origin": "*"}} - 最稳妥的本地验证方式：用
curl -I https://cdn.example.com/style.css直接看响应头，确认Access-Control-Allow-Origin存在且值合理，而不是只看浏览器控制台有没有报错
crossorigin 模式匹配、以及中间层（CDN/反向代理）是否透传或覆盖这些头——这三个点只要漏掉一个，CORS 就会静默失败。别信控制台没报错就等于成功。 
