加crossorigin的核心目的是让JS能安全读取跨域CSS内容并监控加载失败，而非解决CSS加载问题；必须HTML设crossorigin="anonymous"且服务端返回Access-Control-Allow-Origin响应头。
不加 crossorigin 就读不了 document.styleSheets[n].cssRules
加 crossorigin 的核心目的不是“让 CSS 加载成功”，而是让 JS 能安全读取样式表内容。没加时，哪怕 CSS 正常渲染了，执行 document.styleSheets[0].cssRules 会直接抛 SecurityError —— 浏览器把跨域样式表标记为“污染”，禁止 DOM API 访问。
- 只有
rel="stylesheet"时crossorigin才生效；rel="icon"、rel="manifest"加了也白加，浏览器直接忽略 - 必须同时满足两个条件：HTML 中写了
crossorigin="anonymous"（显式写值，别只写crossorigin），且服务端对 .css 文件返回Access-Control-Allow-Origin: *或精确匹配域名 - 如果 CSS 里用了
@import引其他跨域 CSS，那些子资源也得各自配好 CORS 响应头，否则整个styleSheet对象仍被标记为不可读
不加 crossorigin 就捕获不到 CSS 加载失败的 onerror 细节
没加 crossorigin 时，跨域 CSS 加载失败只会静默丢弃，onerror 要么不触发，要么触发但 event.target.href 是空、event.error 是空对象——同源策略屏蔽了所有上下文。
- 加了
crossorigin="anonymous"后，浏览器改用 CORS 模式加载；服务端配对返回Access-Control-Allow-Origin，onerror才能拿到真实失败 URL，配合 Network 面板定位问题 - 只加属性但服务端没响应头 → 样式丢失 + 无报错 +
onerror失效，排查难度陡增 - 动态插入的
<link>必须在appendChild()前设置好crossorigin属性，插完再设无效
Webpack/Vite 构建注入的 link 标签默认不带 crossorigin
现代构建工具生成的 <link rel="stylesheet"> 几乎都不带 crossorigin，哪怕你把 CSS 托管在跨域 CDN 上。这不是模板写错了，是插件默认行为。
- Webpack：用
MiniCssExtractPlugin时，需在options.insert函数里手动给<link>补上crossorigin="anonymous" - Vite：默认不注入该属性；可通过插件（如
vite-plugin-html）在 HTML 注入阶段补，或改用build.rollupOptions.output.manualChunks+ 自定义<link>注入逻辑 - 本地
file://协议下，crossorigin完全无效，无论服务端怎么配——必须用 HTTP 服务启动页面才能验证
crossorigin="use-credentials" 基本不该用
绝大多数场景下，crossorigin="use-credentials" 是个陷阱。它要求服务端返回精确域名（不能是 *）且带 Access-Control-Allow-Credentials: true，稍有偏差就静默失败，控制台可能连错误提示都没有。
立即学习“前端免费学习笔记（深入）”；
- 公共 CDN（jsDelivr、unpkg、Cloudflare Pages）只支持
anonymous模式；它们返回的Access-Control-Allow-Origin: *和use-credentials冲突，请求直接被拒 - 即使服务端全配对，JS 仍无法读取
cssRules—— 这是规范限制，不是配置漏了 - 真正需要凭据的场景极少：比如字体托管在需登录态访问的私有内网 CDN，且前端明确要传 Cookie；普通项目一律用
crossorigin="anonymous"
crossorigin 不是为“加载”，而是为“可读”和“可监控”。它本身不解决跨域，只是打开了一扇门；门后有没有路，全看服务端是否返回匹配的 Access-Control-Allow-Origin 响应头。 
