最近在公司搬砖遇到一个前端问题，难不倒我这个CRUD小子。问题1点击下载图片，报如下跨域错误，AccesstoXMLHttpRequestat'XXX'fromorigin'XX'hasbeenblockedbyCORSpolicy:No'Access-Control-Allow-Origin'headerispresentoAJAX问题是当我们的图片服务器配置了CORS规则问题2显示的图片后，图片的内容明显发生了变化，但是显示出来的还是原来的图片。解决方法：需要在项目中添加时间戳来显示图片。上传修改图片后，如果图片路径名没有变化，服务器会认为是同一次请求，将请求数据替换为缓存数据。这时需要在显示图片路径后添加时间戳url=url+"?t="+newDate().getTime();虽然问题解决了，但是明明可以这样解决问题2，但是为什么问题1可以解决，还是一头雾水，希望有人看到能解答一下它。更多图片下载方法图片下载也有点麻烦。一开始我用的是a标签，但是点击a标签浏览器会新开一个窗口显示图片，并不会直接下载到本地。我用了下面两种方法，亲爱的测试可用downloadImg(src,name){src=src+"?t="+newDate().getTime();fetch(src).then((response)=>{response.blob().then((myBlob)=>{consthref=URL.createObjectURL(myBlob);leta=document.createElement("a");a.href=href;a.download=name;a.click();});});},downloadImg:function(imgSrc,name){constimage=newImage()//解决跨域Canvas污染问题image.setAttribute('crossOrigin','anonymous')image.onload=()=>{constcanvas=document.createElement('canvas')canvas.width=image.widthcanvas.height=image.heightconstcontext=canvas.getContext('2d')context.drawImage(image,0,0,image.width,image.height)canvas.toBlob((blob)=>{consturl=URL.createObjectURL(blob)consta=document.createElement('a')a.download=name||'photo'a.href=urla.click()a.remove()URL.revokeObjectURL(url)})}image.src=imgSrc},
