只有rel="stylesheet"和rel="preload"且as="font"或as="script"时crossorigin才生效；其他如rel="icon"、rel="manifest"、rel="preload"+as="image"加了也无效，浏览器直接忽略。
哪些link标签加crossorigin才真正起作用
只对 rel="stylesheet" 和 rel="preload" 且 as="font"（或 as="script"）这两类生效；其他如 rel="icon"、rel="manifest"、rel="preload" + as="image" 加了也白加，浏览器直接忽略，不发 CORS 请求，也不报错。
常见误操作包括：
-
<link rel="icon" href="/favicon.ico" crossorigin="anonymous">→ 静默无效，favicon 加载逻辑完全不变 -
<link rel="preload" as="image" href="https://cdn.com/photo.jpg" crossorigin>→as="image"不被规范支持，crossorigin被丢弃 - Webpack/Vite 构建自动注入的
<link rel="stylesheet">标签默认不带crossorigin，即使 CSS 托管在跨域 CDN 上，CSSOM 读取和错误捕获也会失效
crossorigin="anonymous" vs "use-credentials" 怎么选
核心区别不在“要不要传 Cookie”，而在于服务端响应头是否匹配、以及你能否读取资源内容。
crossorigin="anonymous"：
- 请求头含
Origin，但不含 Cookie 或认证信息 - 服务端只需返回
Access-Control-Allow-Origin: *或精确匹配源（如https://your-site.com） - 绝大多数公开 CDN（jsDelivr、unpkg、Cloudflare Pages）只支持该模式
crossorigin="use-credentials"：
- 请求头同时带
Origin和凭证（Cookie、Authorization 等） - 服务端必须返回
Access-Control-Allow-Origin: https://your-site.com（不能是*）且Access-Control-Allow-Credentials: true - 多 CDN 场景下极易翻车：任一域名漏配或返回
*，资源静默失败，样式/字体不加载，控制台可能无提示
加了crossorigin却报CORS错误或样式丢失，为什么
不是前端写错了，而是前后端没配对。加 crossorigin 只是告诉浏览器“走 CORS 流程”，最终能否成功，全看服务端响应头。
- 只加
crossorigin="anonymous"，但服务端没返回Access-Control-Allow-Origin→ 样式表被静默丢弃，页面无样式，onerror可能不触发或参数为空 - 服务端返回
Access-Control-Allow-Origin: *，但前端用了crossorigin="use-credentials"→ 浏览器直接拒收响应体，控制台报预检失败或凭据校验错误 - CDN 上的 CSS 含
@import其他跨域 CSS → 子资源也需各自配 CORS，否则整个document.styleSheets[n]被标记为不可读 - 本地用
file://协议打开 HTML →crossorigin完全无效，无论服务端怎么配
什么时候必须加crossorigin，不加会怎样
只有两类场景真需要它，不加会导致明确功能缺失：
- 想用 JS 读取跨域 CSS 规则：
document.styleSheets[0].cssRules或监听sheet.rules.length变化 → 不加crossorigin会抛SecurityError，返回null - 用
<link rel="preload" as="font">加载跨域字体 → 不加crossorigin，字体可能 fallback 到系统字体，@font-face绑定失败
其他情况比如单纯让样式渲染出来、收集 CSS 加载耗时、甚至基础的 onerror 监听，都不依赖 crossorigin —— 但它确实是获取完整错误上下文（如 event.target.href）和启用 integrity 校验的前提。
最容易被忽略的是：动态构建工具注入的 <link> 标签，往往漏掉这个属性；而服务端若没配好响应头，问题不会立刻暴露，直到你尝试读 CSSOM 或发现错误监控收不到真实 URL。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
