标签的 crossorigin 属性对图片 cdn 完全无效，因其不支持 as="image"，仅对 stylesheet、font、script 生效；图片跨域必须使用 并配合服务端 cors 响应头。
为什么 <link> 加 crossorigin 对图片 CDN 完全无效
<link> 标签的 crossorigin 属性**不支持图片资源**，哪怕你写成 <link rel="preload" as="image" href="https://cdn.example.com/photo.jpg" crossorigin="anonymous">，浏览器也直接忽略该属性，不会发起 CORS 请求，更不会影响图片加载行为。
它只在以下有限场景生效：rel="stylesheet"（CSS）、rel="preload" 且 as="font" 或 as="script"。图片不是受支持的 as 值，W3C 规范和所有主流浏览器（Chrome/Firefox/Safari）均不识别 as="image" 的 CORS 行为。
常见误操作包括：
- 用
<link rel="preload" as="image">试图“提前加载跨域图片并启用 CORS”——实际只是普通 preload，后续<img>仍需单独配crossorigin - 给
<link rel="icon">加crossorigin——浏览器静默丢弃该属性，favicon 加载逻辑完全不受影响 - 以为
<link>能替代<img crossorigin>实现 canvas 像素读取——根本不可能，canvas 污染问题照旧发生
<img crossorigin> 才是图片 CDN 跨域的唯一正解
要让 CDN 上的图片能被 JavaScript 安全读取（比如进 canvas 后调用 toDataURL() 或 getImageData()），必须在 <img> 标签上显式设置 crossorigin，且值必须为 "anonymous" 或 "use-credentials"（不能留空或写 true）。
关键点：
-
crossorigin="anonymous"是绝大多数 CDN 图片的首选：请求头带Origin，但不带 Cookie；服务端需返回Access-Control-Allow-Origin: *或精确匹配当前域名 - CDN（如 Cloudflare、AWS S3、Imgix）通常默认**不开启 CORS**，必须手动配置 bucket / behavior / rule，否则即使前端写了
crossorigin，Network 面板里也看不到Access-Control-Allow-Origin响应头 - 动态创建图片时容易漏掉：用
new Image()创建后，必须手动赋值img.crossOrigin = 'anonymous'，HTML 中写的属性对 JS 实例无效
CDN 配置没对齐时的典型报错现象
前端加了 crossorigin，但控制台仍报错，基本可锁定为服务端响应头缺失或不匹配。常见组合及对应错误：
-
<img crossorigin="anonymous" src="https://cdn.example.com/photo.jpg?x-oss-process=image/resize,p_40">+ 服务端无任何 CORS 响应头 → 控制台报Failed to load resource: the server responded with a status of 403或空白 Network 请求 -
<img crossorigin="use-credentials" src="...">+ 服务端返回Access-Control-Allow-Origin: *→ 浏览器直接拒绝响应，Network 面板显示Blocked by CORS policy: The value of the 'Access-Control-Allow-Origin' header in the response must not be the wildcard '*' when the request's credentials mode is 'include' -
<img crossorigin="anonymous" src="...">+ 服务端返回Access-Control-Allow-Origin: https://other-site.com（非当前域名）→ 图片加载失败，报has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present
Canvas 污染问题最容易被忽略的触发点
即使图片成功显示在页面上，只要没正确配 crossorigin + 服务端 CORS 头，后续任何读取像素的操作都会失败。这不是“图片没加载好”的问题，而是浏览器的污染标记机制在起作用。
必须同时满足：
-
<img>元素已设置crossorigin="anonymous"（拼写必须是crossorigin，不是crossOrigin或crossorigin="true"） - 图片 URL 真实可被 CORS 请求访问（用
curl -H "Origin: https://your-site.com" -I https://cdn.example.com/photo.jpg验证响应头） -
canvas.drawImage(img, ...)必须在img.onload回调内执行，否则可能因异步时机导致 canvas 被标记为污染
一旦 canvas 被污染，所有 toDataURL()、getImageData()、toBlob() 都会抛 SecurityError，且无法恢复——只能重新加载带正确 CORS 配置的图片。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
