关于前端:图片下载跨域问题图片展示缓存问题

最近在公司搬砖，遇到一个前端问题，可难为死我这个 CRUD 仔了。

问题 1

点击下载图片的时候，报上面这种跨域的谬误，

Access to XMLHttpRequest at 'XXX' from origin 'XX' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present o AJAX

问题是咱们的图片服务器曾经配置了 CORS 规定

问题 2

展现的图片的时候，明明图片内容曾经变动了，然而展现进去的图片还是原来的图片。

解决：

在我的项目中显示图片须要加工夫戳，

上传图片批改图片后，如果图片门路名字未有扭转，服务器会认为是同一个申请，会用缓存数据代替申请数据，

这个时候须要在图片显示门路后加工夫戳

url = url + "?t=" + new Date().getTime();
 <img src=url />

尽管问题解决了，问题 2 用这种办法能够解决不言而喻，然而问题 1 为什么能够这么解决，还是一脸懵逼，心愿有大佬看到能够解答一下。

更多

图片下载形式

图片下载这个也略麻烦，刚开始用 a 标签，然而 a 标签点击，浏览器会关上新的窗口展现图片，并不会间接下载到本地，我用了上面两种办法，亲测可用

downloadImg(src, name) {src = src + "?t=" + new Date().getTime();
    fetch(src).then((response) => {response.blob().then((myBlob) => {const href = URL.createObjectURL(myBlob);
        let a = document.createElement("a");
        a.href = href;
        a.download = name;
        a.click();});
    });
  },

 downloadImg: function (imgSrc, name) {const image = new Image()
    // 解决跨域 Canvas 净化问题
    image.setAttribute('crossOrigin', 'anonymous')
    image.onload = () => {const canvas = document.createElement('canvas')
      canvas.width = image.width
      canvas.height = image.height
      const context = canvas.getContext('2d')
      context.drawImage(image, 0, 0, image.width, image.height)
      canvas.toBlob((blob) => {const url = URL.createObjectURL(blob)
        const a = document.createElement('a')
        a.download = name || 'photo'
        a.href = url
        a.click()
        a.remove()
        URL.revokeObjectURL(url)
      })
    }
    image.src = imgSrc
  },