标签的crossorigin属性对图片CDN完全无效，因其不支持as="image"，仅对rel="stylesheet"、rel="preload" as="font"和rel="preload" as="script"生效；图片跨域必须使用并配合服务端CORS响应头。
为什么加crossorigin对图片CDN完全没用
link标签的crossorigin属性根本不支持as="image"，哪怕你写成<link rel="preload" as="image" href="https://cdn1.example.com/photo.jpg" crossorigin="anonymous">，浏览器也会直接忽略crossorigin，按普通非CORS方式加载。它只在以下三种场景生效：rel="stylesheet"、rel="preload" as="font"、rel="preload" as="script"。图片不是受支持的as值，W3C规范和Chrome/Firefox/Safari均不识别。
多CDN字体资源必须配且服务端响应头对齐
当你从多个CDN（如fonts.gstatic.com、cdn2.example.com）加载@font-face字体时，link标签必须显式声明crossorigin，否则浏览器会因CORS策略阻止字体解析，导致文字回退或渲染异常。
-
crossorigin不带值（即<link crossorigin>）等价于crossorigin="anonymous"：请求头带Origin，但不带Cookie - 若字体需登录态（极少见），才用
crossorigin="use-credentials"，此时服务端必须返回Access-Control-Allow-Origin精确域名 +Access-Control-Allow-Credentials: true - 每个CDN都要单独配置CORS响应头；一个CDN配了，不代表另一个也生效
- 常见翻车点：
Access-Control-Allow-Origin: *与crossorigin="use-credentials"共存 → 浏览器直接拒绝响应
多CDN CSS资源启用crossorigin后JS读CSSOM才可能成功
如果你用document.styleSheets[0].cssRules动态读取跨域CSS规则（比如做主题切换、样式注入检测），link必须加crossorigin，否则抛SecurityError。但注意：
- 仅
rel="stylesheet"支持该行为；rel="icon"或rel="manifest"加了也无效，浏览器静默丢弃 - 服务端必须返回
Access-Control-Allow-Origin匹配当前页面域名，不能只返回*（除非你没用withCredentials） - 多个CDN CSS并行加载时，任一未配CORS头，对应
cssRules访问就会失败，不会降级或跳过 - Webpack/Vite构建工具默认不给
link注入crossorigin，需手动在HTML中添加或通过插件注入
多CDN场景下最容易被忽略的兼容性陷阱
多个CDN资源混用时，crossorigin配置错一个就全盘失效。最常漏掉的是：
立即学习“前端免费学习笔记（深入）”；
- CDN控制台里开了CORS，但没覆盖全部路径（比如只配了
/fonts/**，漏了/css/**） - 用了
crossorigin="anonymous"，但CDN返回的Access-Control-Allow-Origin是https://www.example.com，而页面实际跑在https://example.com（少www）→ 不匹配 - 本地开发用
file://协议打开HTML，或用Live Server启动但后端没返回CORS头 →crossorigin形同虚设 - 误以为
<meta http-equiv="Access-Control-Allow-Origin" content="*">能替代服务端响应头 → 完全无效，浏览器根本不认
真正起作用的只有服务端HTTP响应头，前端加crossorigin只是“申请走CORS流程”，不是开关，也不是补丁。
