Vue3 图片或视频下载跨域或文件损坏的解决方法

修改跨域配置文件

修改vite.config.ts文件proxy里面写跨域地址，如下图，图片地址就是我们要跨域的目标地址：

下载方法

如下就是我取消上面那句后的报错

然后调用两个方法即可：

//下载
const downloadCallback = () => {const url = mediaItem?.mediaUrl.replace("http://www.aaa(注意这里是需要替换的地址)", "/download")downloadFile(url, mediaItem?.name ?? '下载' ) // 调用方法一// downloadImg(url)// 调用方法二
}//方法一
const downloadFile = (fileUrl:string, fileName:string) => {fetch(fileUrl).then(res =>res.blob().then((blob) => {const a = document.createElement('a')const url = window.URL.createObjectURL(blob)a.href = urla.download = fileNamea.click()window.URL.revokeObjectURL(url)}),)
}//方法二
const downloadImg = (url:string) => {axios({url, //URL,根据实际情况来 method: "get", responseType: "blob"}).then((response)=> { console.log('response',response)const link = document.createElement("a"); let blob = new Blob([response.data], { type: response.data.type }); let url = URL.createObjectURL(blob); link.href = url; link.download = mediaItem?.name ?? '下载'; link.click(); window.URL.revokeObjectURL(url)});
}

记录一下工作中的小问题，自助助人！