浏览器端CORS策略 + 缓存策略 导致的 跨域策略失效 问题

问题现象

DataV的屏幕上发现了这么个诡异的现象：

在开发的屏幕中，用xhr加载图片供canvas渲染，时好时坏，报错的异常是：跨域失败，查看network的请求，在失败的时候，图片返回的header里确实缺失了cors的几个关键信息。

而且开发的同学经常是好的，到了用户手里就不行。

服务器端的oss策略仔细检查了，没有问题， 而且屏幕上有时候是好的，说明服务至少正常过。oss的接口幂等基本上不用怀疑，所以把疑问再次转回到客户端。

在一次本地重现之后，在network里过滤出错图片地址，结果发现除了 xhr的请求，还有一个标签发起的请求， 把调试器的缓存关闭之后，刷新屏幕页面，重现了。

故障原因

上述页面有两个请求指向同一个 图片地址, 当img标签先行的时候，

<img src="pic.png"/>

浏览器返回了图片，但是由于img标签发起请求的时候并不会带上 Origin头，所以Aliyun OSS在返回的response header 里并没有带上 cors需要的 Access-Control-Allow-Origin 等信息，因为 标签并不受同源策略限制。 于是浏览器 cache了这个图片请求，当然也包括header信息。

当 xhr再次发起对这个图片的请求时，命中了浏览器缓存，这时候问题就出现了，header里没有告诉xhr可以信任当前域，所以浏览器拒绝了这个请求。

解决办法

最简单的办法，把两个调用地址区分开，xhr可以加个 ?xhr

所以这种异常，不是OSS的锅

浏览器需要改进么？

目前浏览器缓存策略只是根据资源地址来cache，并没有区分调用形式，以及调用时header的差异。
作为资源cache，也合情合理。

不过历史原因， 图片资源、script标签 等，浏览器一直没有对这些请求开启同源策略限制，当然也无法开启（一旦大量的站点要挂）。

有没有必要开启？ 能不能开启？ 这是另外的问题，但是Origin的头可以先带上。