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

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

问题1

问题2

解决：

更多

图片下载形式