Safari中Canvas跨域报错需前端在设置img.src前赋值crossOrigin="anonymous"，并确保服务端返回匹配的Access-Control-Allow-Origin头；若仍失败，可用fetch+createObjectURL或动态时间戳绕过缓存误判。
Canvas在Safari中绘制跨域图片时突然报错“Tainted canvases may not be exported”，明明Chrome里加了crossOrigin="anonymous"就能跑通，但Safari却坚持拒绝读取像素——这不是代码写错了，而是Safari对CORS资源的校验更严格、缓存行为更保守、错误反馈更沉默。
为什么Safari会无视crossOrigin属性
第一步：确认你设置crossOrigin的时机是否正确。必须在设置img.src之前赋值，否则Safari会忽略该属性并按非CORS模式发起请求。
第二步：检查Network面板中图片请求的Response Headers，确认服务器确实返回了Access-Control-Allow-Origin头。Safari不会像Chrome那样宽容地“尝试执行”，只要响应头缺失或不匹配，它就直接标记为污染，且不抛出明显错误提示。
第三步：注意Safari（尤其是macOS Monterey及更早版本）对CDN资源的特殊处理——即使OSS或Cloudflare已开启CORS，若图片URL带查询参数（如?version=1），而CDN未将这些参数纳入CORS预检缓存键，Safari可能复用一个无CORS头的缓存响应，导致crossOrigin失效。
绕过Safari CORS限制的两种实操方法
方法一：用fetch+createObjectURL替代Image对象
这一步操作起来很简单，直接把文件拖进去就行。先用fetch获取图片二进制流，再通过URL.createObjectURL生成本地blob URL，最后赋给Image.src。整个过程不经过CORS校验环节，Safari完全接受。
方法二：手动添加时间戳参数强制刷新缓存
在img.src末尾拼接?t=【Date.now()】，例如img.src = 'https://cdn.example.com/photo.jpg?t=' + Date.now()。这个技巧在iOS 13–14和macOS Safari 13–15中特别有效，能绕过其对带参数URL的CORS缓存误判。注意：不能用固定字符串如?t=1，必须每次动态生成。
服务端必须配合的关键动作
仅前端改代码无法根治问题。Safari要求Access-Control-Allow-Origin头必须与当前页面协议+域名完全一致，不能是通配符*（除非同时不带credentials）。如果你的站点启用了Cookie鉴权，服务端还需返回Access-Control-Allow-Credentials: true，并将Access-Control-Allow-Origin设为具体源（如https://yourdomain.com），否则Safari直接拒绝响应。
