link标签的crossorigin属性对图片cdn跨域完全无效，因其不支持as="image"，仅对stylesheet、font、script生效；图片跨域必须用并配服务端cors响应头。
link 标签的 crossorigin 属性对图片 CDN 跨域加载**完全无效**，它压根不支持图片资源。
你不能靠 link 加 crossorigin 让 CDN 上的图片变成可读像素、绕过 canvas 污染、或替代 img 的跨域配置。
为什么 link 的 crossorigin 对图片没用
浏览器只在特定 rel 和 as 组合下识别 crossorigin：
-
rel="stylesheet"→ 生效 -
rel="preload" as="font"或as="script"→ 生效 -
rel="preload" as="image"→ 被忽略，不触发 CORS 请求，也不影响后续img加载行为 -
rel="icon"、rel="prefetch"等 → 属性静默丢弃
W3C 规范和 Chrome/Firefox/Safari 均不把 as="image" 列为支持 CORS 的资源类型。写了等于没写。
link rel="preload" as="image" 会提前加载图片吗
会，但只是普通非 CORS 预加载：
- 它能触发浏览器提前发起 HTTP 请求，提升加载速度
- 但不会带
Origin请求头，服务端不会返回Access-Control-Allow-Origin - 后续
img标签仍需单独配crossorigin="anonymous"，否则 canvas 依然报SecurityError - 如果 CDN 没开 CORS，预加载本身可能失败（Network 面板显示 403 或 pending），但页面不会报错，容易误判成功
真正能让图片进 canvas 的唯一方式
必须用 img 标签，并满足两个硬性条件：
-
<img src="https://cdn.example.com/photo.jpg?x-oss-process=image/resize,p_40" crossorigin="anonymous">（注意拼写是crossorigin，不是crossOrigin或crossorigin） - CDN 必须返回响应头：
Access-Control-Allow-Origin: *或精确匹配当前域名 - 动态创建时别漏掉：
const img = new Image(); img.crossOrigin = 'anonymous';（HTML 属性对 JS 实例无效） - CDN 如 Cloudflare、S3、Imgix 默认关闭 CORS，需手动在 bucket / behavior / rule 中开启并透传响应头
常见踩坑组合及现象
以下写法看似合理，实际都会导致 canvas 污染或请求失败：
-
<link rel="preload" as="image" href="..." crossorigin="anonymous">→ 浏览器忽略crossorigin，预加载无 CORS 效果 -
<link rel="icon" href="..." crossorigin>→ favicon 加载逻辑完全不受影响，属性白加 -
<img crossorigin src="...">（没写值）→ 多数浏览器按anonymous处理，但部分 CDN 会拒绝空值，结果仍是污染 - 服务端返回
Access-Control-Allow-Origin: *却配了crossorigin="use-credentials"→ 浏览器直接拒绝响应，Network 里看不到完整 headers
最易被忽略的一点：图片 URL 含 query 参数（如 ?v=2.1）时，CDN 或 Nginx 缓存若未透传 CORS 响应头，会导致缓存命中但 header 缺失——此时 img 已加载完成，canvas 却突然被污染，排查极难。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
