curl -sI https://cdn.example.com/cover.jpg | grep -i access-control
# 需要看到 access-control-allow-origin

给封面图加水印时控制台报 SecurityError,提示 canvas 已被跨域数据污染,toDataURL 直接抛异常,本地图片却正常。先别急着动参数,把报错原文和时间点记下来,顺序反了容易白折腾。

原因不复杂,图片走独立 CDN 域名,响应里没有 Access-Control-Allow-Origin,画进 canvas 后就被视为跨域污染。只给 img 加 crossorigin 属性而服务端不返头也一样。

「canvas 跨域污染」改完先别急着全量,挑一台机器放半天,真有问题这段时间就能看出来。动手前把原文件复制一份带时间戳,出问题立刻换回去,比现场分析快得多。

一次只改一处,改完立刻验证,几个改动叠在一起,出问题就说不清是谁导致的。先做最小复现,能稳定跑出来的问题,排查成本会低一个数量级。

别只看报错的最后一行,往上看几行,真正的起因通常在上面。

处理上按这个顺序:给 img 加 crossorigin 属性,必须在设置 src 之前加;CDN 响应补上 Access-Control-Allow-Origin,值按实际来源配置;确认缓存里旧响应没带这个头,必要时刷新该路径。

改完只确认一件事:toDataURL 不再抛异常,导出的水印图能正常下载。

作者 9823189