由背景图缓存导致的canvas绘图跨域问题

记录一下一个由背景图的缓存，导购绘制canvas海报的时候遇到的跨域问题。

问题代码：

var img = new Image()
	img.crossOrigin = 'anonymous' // 解决跨域
	img.src = '图片地址'
	img.onload = function () {
    
	  // 绘图代码
	}

熟悉的cros跨域报错

Access to image at 'xxx.xxx.xxxx.png' from origin 'xxx.xxx.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

如果是自己的服务器存储的图片，那就上nginx中，加上的熟悉的三件套代码。

    add_header Access-Control-Allow-Origin *;
    add_header Access-Control-Allow-Methods 'GET, POST, OPTIONS';
    add_header Access-Control-Allow-Headers 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Authorization';

但这一次的图片不一样，是在腾讯COS存储中。

给腾讯云COS配置一下跨域

先上腾讯云的COS存储中，加上跨域访问，设置成*号还是指定域名都可以，强烈建议用指定域名，像我们这种懒人就懒的指定域名了，万一项目换了一个域名还要来这里再配置一下。

配置好了之后，发现这破代码还是报这个跨域错误。

用curl测试一下配置跨域是否成功了。

curl -Lvo /dev/null "您的域名图片地址" -H "指定来源地址"

测试一下，看到200状态，跨域设置成功了。

这里配置好了，如果没有下面的背景图导购的缓存问题，跨域问题到这里就已经解决了。

如果还是有跨域的问题，那么有可能遇到了和我一样的问题，图片缓存

解决思路整理回顾一下：

报错代码是：Access to image at ‘xxx.xxx.xxxx.png’
这里关键的是这个图片地址，我执行curl测试发现并没有这个跨域问题，那么肯定不是COS的问题，肯定还是JS端绘图这边的问题。
定位到代码，发现已经加了img.crossOrigin = 'anonymous’属性，理论上不应该会出问题了。
一顿瞎折腾，怀疑是这个anonymous没生效，手动更换其它图片是可行的不报错，一使用这个图片就报错。
定位判断是这个图片有问题。
好好的图片能啥问题？
看一下调试工具的img请求，发现这图是缓存中发起的，没有应用到加的那个img.crossOrigin = 'anonymous’属性

好好的图片为啥有缓存？
原来是绘制这个图片之前，这个图片地址被设置成了背景图片，第一次设置背景图的时候相当于标签，并不会跨域，但是浏览器将加载的背景图缓存了起来，当我们在JS中创建了一个img对象，设置src属性的时候再来加载图片，浏览器的机制发现这张图已经有缓存图片了，但是并没有img.crossOrigin属性，这里就判断为跨域了。

问题定位到了，解决办法就很简单了，
给图片后面加一个时间戳罢，不就没有缓存了么。

var img = new Image()
	img.crossOrigin = 'anonymous' // 解决跨域
	img.src = '图片地址' +  '?v='+(new Date()).valueOf() // 不应用缓存
	img.onload = function () {
    
	  // 绘图代码
	}

问题解决，搞定收工。