前端下载时，出现err::netERR_FAULT的报错

场景：文件下载时，前端通过axios请求后台接口，同时将文件的“半链接”传给该接口，此时后台会重定到文件下载的链接，如果文件过大时，部分浏览器则会出现上述报错，导致无法下载

解决方案：前端通过fetch请求该接口，然后获取到对应的重定向链接，然后通过前端下载即可

注意：在使用fetch请求时，要添加token

下边直接上代码

问题代码：

// 下载全部模板
const downloadModel = async () => {const url = '/common/url'if (url ) {tempDownload(url , '全部模板.zip')} else {ElMessage.warning('模板不存在！')}
}// 前端下载方法
const tempDownload = async (url: string, fileName?: string) => {// 此处的接口，后台会发生重定向，导致部分浏览器在重定向时，产生报错const blob = await downloadPermission({ url })const a = document.createElement('a')a.style.display = 'none'const href = window.URL.createObjectURL(blob)a.href = hrefa.download = fileName ? fileName : 'file'document.body.appendChild(a);a.click();window.URL.revokeObjectURL(url);document.body.removeChild(a);
}

正确代码：

// 下载全部模板
const downloadModel = async () => {const url = '/common/url'const token = '系统token'if (url) {// 通过后台接口，获取可以下载的全链接，并且有权限、时效控制fetch(`/download/files?url=${url}`, {method: 'GET',headers: {"accept": "*/*",'Cache-Control': 'no-cache',"token": token ,}}).then((response) => {if (response.url) {// 前端通过tempDownload方法直接下载即可tempDownload(response.url, '全部模板.zip')} else {ElMessage.warning('模板不存在！')}}).catch(error => console.log('error', error))} else {ElMessage.warning('模板不存在！')}
}// 前端下载方法
const tempDownload = async (url: string, fileName?: string) => {if (!url) return falseconst a = document.createElement('a')a.style.display = 'none'a.href = urla.download = fileName ? fileName : 'file'document.body.appendChild(a)a.click() // 触发点击事件以启动下载document.body.removeChild(a)
}