当跨域遇上浏览器缓存

问题描述

在做一个图片相关的项目时，需要用canvas对图片进行在线绘制。图片素材放在了CDN上，因而canvas的访问带来了跨域问题。为了解决跨域问题，在CDN上配置了跨域访问头。如下所示：

Access-Control-Allow-Origin

Access-Control-Allow-Methods

然而配置好了跨域请求头之后，浏览器仍然提示跨域访问被拒绝。百般费解，为什么CDN已经配置了跨域访问的情形下，仍然会失败呢？

问题排查

采用Chrome调试模式发现，canvas的请求头里面没有CORS相关的字段。怀疑是CDN故障。

联系CDN客服测试，结果客服测试发现没有问题。经过双方比较浏览器的环境发现，客服是在disable cache的环境下执行的。

于是确认该问题是由浏览器缓存导致的。

再次调试所有网络请求发现，在canvas请求之前，还有一个<img>标签加载了同样的图片，因为<img>加载在前，因而等到canvas再次加载的时候，浏览器直接使用了缓存，但是该缓存的请求是不支持跨域的。

于是便出现了上文描述的问题。

解决办法

在定位了问题以后，有两个办法。

一是将<img>标签的请求改为跨域请求方式。该思路需要修改img的请求方式，该方式博主并没有验证，仅提供思路。

二是禁止图片缓存。在CDN图片的HTTP头中设置Cache-Control为no-cache，如下图为阿里云配置示意：

禁用缓存后，canvas即可以顺利从CDN获取图片。