Image跨域问题

问题描述

之前为了使用canvas去生成dataURL，避免二次请求，在创建Image对象的时候，给image对象设置了如下属性（目的是为了避免出现canvas污染的问题）：

let img  = new Image();
img.setAttribute('crossOrigin', 'Anonymous');

后面直接给img元素(不是image对象，是一个DOM元素)的src属性赋值一个url，这时候浏览器会把图片缓存下来。之后问题来了，在浏览器把相同的图片缓存下来之后，设置了上面代码段的Image对象在请求图片的时候，会报跨域错误，如图1.1。

图1.1

问题解决

首先分析一下，如果给image对象设置crossOrign属性的话，那么image对象请求的时候一定会按照跨域请求去请求图片。如果是请求远端服务器的图片，并且服务器设置了cors，那么这个是没有问题的。但是如果是读取浏览器缓存的话，那么就有问题了。因为命中缓存不会返回符合cors要求的响应头，这时候浏览器会把请求丢弃，从而触发错误。
解决方案就是把个image对象设置的crossOrigin属性删掉