crossorigin="anonymous"是绝大多数图片跨域场景的唯一正确值；它使请求不带凭据，要求服务端返回access-control-allow-origin: *或精确匹配域名，而use-credentials仅用于需cookie的特例，无效值如空值或拼写错误会导致非cors模式、canvas必然污染。
crossorigin="anonymous" 是绝大多数图片跨域场景的唯一正确值
不是所有值都可用，crossorigin="use-credentials" 仅在图片请求必须携带 Cookie 或登录态时才考虑；而 crossorigin（无值）、crossorigin=""、crossorigin="xyz" 都等效于非 CORS 模式——图片能显示，但 canvas 一定被污染。99% 的 CDN 图床（如 Unsplash、Imgix、OSS 公共 bucket）只认 Access-Control-Allow-Origin: *，所以必须用 crossorigin="anonymous"，否则服务端响应头不匹配，浏览器直接拒绝响应体。
HTML 中写法必须紧贴 <img> 标签且拼写准确
常见手误导致完全失效：
-
<img src="https://cdn.example.com/photo.jpg?x-oss-process=image/resize,p_40" crossorigin="anonymous">✅ 正确 -
<img src="..." crossorigin="anonymous">❌ 属性名大小写错误（HTML 不区分大小写但部分解析器会忽略） -
<img src="..." crossorigin="Anonymous">❌ 值首字母大写，浏览器按无效值处理 -
<link rel="icon" href="/favicon.ico" crossorigin="anonymous">❌<link>对rel="icon"不支持 crossorigin，纯属冗余
JS 动态创建图片时 crossOrigin 必须在 src 赋值前设置
这是最容易漏掉的执行顺序问题。一旦 src 先赋值，浏览器立刻发起普通请求，后续再设 crossOrigin 已无效：
- ✅ 正确：
const img = new Image(); img.crossOrigin = 'anonymous'; img.src = 'https://cdn.example.com/photo.jpg'; - ❌ 失效：
const img = new Image(); img.src = 'https://cdn.example.com/photo.jpg'; img.crossOrigin = 'anonymous'; - ⚠️ 注意：HTML 中写的
crossorigin属性对 JS 创建的new Image()实例**完全不生效**，必须手动赋值
服务端没返回 Access-Control-Allow-Origin 就等于白配
前端加了 crossorigin="anonymous" 只是“发个申请”，是否批准全看服务端响应头。检查方式很简单：打开浏览器 Network 面板，找到该图片请求，确认 Response Headers 中有：
-
Access-Control-Allow-Origin: *（静态资源通用）或Access-Control-Allow-Origin: https://your-site.com（带凭证时必需） - 如果图片来自 AWS S3 / 阿里 OSS / Cloudflare，需单独配置 bucket 或 Page Rule 的 CORS 规则，Nginx 的
add_header对这些托管服务无效 - 本地开发用
file://协议时，所有 CORS 请求都会失败——必须用http-server或 VS Code Live Server 启动 HTTP 服务才能验证
canvas 报 “tainted” 错误，从来不是因为前端少写了一个属性，而是服务端那行 Access-Control-Allow-Origin 没打出来，或者打错了位置（比如只配在 HTML 接口，没配在图片 URL 路径上）。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
