前端 - 浏览器缓存导致二次下载图片失败

今天遇到个很经典的问题，涉及范围从 浏览器缓存 到 网络，所以记录下，以备之后遇到的时候可以快速定位。

bug发生背景：

有一个这样的需求，如下图所示，页面可以预览到一个加密过的图片的列表（这里的重点是，图片和页面是不同源，也就是我们常说的跨域了），查看图片的时候ok的，显示完美，但是呢，一旦点击右上角的“下载文件”就有问题了，会报跨域的错误（下图二）。

这里有个前提是关于图片下载的实现：（可点击到我的另一篇博文查看详情：https://blog.csdn.net/Echo601/article/details/102508976）

1. 前端实现图片下载的方式： 由于a标签的href赋值为图片地址，只能起到预览的效果不能下载到本地，所以要用到canvas.drawImage的方法将地址转化成base64格式，然后赋值给a标签后再点击。