canvas被污染主因是服务端未返回cors头或js中img.crossorigin赋值晚于src设置；需确保服务端响应含access-control-allow-origin，且js中crossorigin必须在src前设置。
加了 crossorigin 属性但 canvas 还是被污染？不是属性没用，而是前后端配合断在了某个环节——90% 的问题出在「服务端没回 CORS 头」或「JS 动态创建图片时赋值顺序错了」。
crossorigin="anonymous" 必须和服务端 Access-Control-Allow-Origin 匹配
前端写了 crossorigin="anonymous"，只是让浏览器发一个带 Origin 请求头的图片请求；如果服务端响应里没有 Access-Control-Allow-Origin，这次请求就等同于普通跨域请求，图片能显示，但绘入 canvas 后立刻被污染。
- 服务端必须对图片资源（不只是 HTML）返回
Access-Control-Allow-Origin: *或明确匹配当前页面源（如https://your-site.com） - CDN（如阿里 OSS、腾讯 COS、Cloudflare）默认不开启 CORS，需在控制台手动添加跨域规则，且
AllowedOrigins不能填*（当用了use-credentials时） - Nginx 反向代理图片时，需显式透传头：
add_header Access-Control-Allow-Origin "*";，否则代理层会吃掉响应头 - 本地用
file://协议打开 HTML，所有 CORS 请求都会失败——必须起本地 HTTP 服务（如npx http-server）
JS 动态创建 Image 时 crossOrigin 赋值时机不能错
HTML 中写 <img crossorigin="anonymous"> 是生效的，但 JS 里用 new Image() 创建的实例，crossOrigin 属性默认为 null，必须在设置 src 之前赋值，否则浏览器仍按非 CORS 模式发起请求。
- ✅ 正确：
const img = new Image(); img.crossOrigin = "anonymous"; img.src = "https://cdn.example.com/photo.jpg"; - ❌ 错误：
const img = new Image(); img.src = "..."; img.crossOrigin = "anonymous";（此时已发起普通请求，再设无效） - 注意：JS 属性名是
crossOrigin（驼峰），不是crossorigin（小写连字符） - 如果图片来自带查询参数的 URL（如
?v=2.1），检查 CDN 是否缓存了无 CORS 头的旧响应
验证是否真生效：别只看图片能不能显示
跨域图片能正常显示 ≠ 能用于像素操作。污染是静默发生的，只有调用 toDataURL() 或 getImageData() 才会报错。验证要直击关键点：
- 在 Network 面板中找到该图片请求，确认响应头含
Access-Control-Allow-Origin，且值合法（不是空、不是拼写错误） - 绘制完成后立即测试：
ctx.getImageData(0, 0, 1, 1)不抛错 → 说明未污染；抛SecurityError: The canvas has been tainted by cross-origin data→ 仍污染 -
crossorigin="use-credentials"仅当图片接口依赖 Cookie 或登录态时才用，此时服务端必须同时返回Access-Control-Allow-Origin（具体域名）和Access-Control-Allow-Credentials: true，二者缺一不可 - background-image 不支持
crossorigin，这是 CSS 规范限制，换任何写法都无效
最常被忽略的是：你以为服务端配好了，其实 CDN 缓存了旧响应头；你以为 JS 写对了，其实 src 设置在 crossOrigin 之前。污染不是玄学，是可验证的链路断裂——每一步都要在 Network 面板里亲眼看到响应头，才算真正闭环。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
