图片下载跨域问题、图片展示缓存问题

最近在公司搬砖，遇到一个前端问题，可难为死我这个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 />

更多

图片下载方式

图片下载这个也略麻烦，刚开始用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
  },