Js 下载大文件Error: Network Error

一、问题

现象

	同一个下载接口在某些浏览器上执行下载时,小文件可以正常下载无异常,当文件超过10M时会下载中断并提示NetWork Error。在高版本Chrome浏览器(110.0.5481.178(正式版本) (64 位))上无异常。

日志

Error: Network Error
    at e.exports (axios.min.js:8)
    at XMLHttpRequest.d.onerror (axios.min.js:8)

环境

1、axios版本0.18.1
2、下载接口请求方式POST.
3、.response类型 ‘blob’
4、下载保存实现:

const blob = new Blob([res.data])
  if (window.navigator.msSaveOrOpenBlob) {
    navigator.msSaveBlob(blob, fileName)
  } else {
    const link = document.createElement('a')
    link.download = decodeURI(fileName)
    link.href = URL.createObjectURL(blob)
    document.body.appendChild(link)
    link.click()
    document.body.removeChild(link)
    URL.revokeObjectURL(link.href)
  }

二、解决方案

将.responseType 改成 arraybuffer

三、排查过程

1、首先定位浏览器版本不同导致问题,排除接口限制和下载代码逻辑导致问题
2、排除axios版本导致问题,升级axios至最新版本后重新运行,发现问题依然存在。
3、百度问题日志,网上说是跨域或者请求方式不同导致问题。后台在接口上添加跨域处理,问题依然存在;修改接口请求方式为GET,问题依然存在。排除以上两种方式导致问题。
4、无意中将responseType 改成 arraybuffer,后问题解决

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 5
    评论
评论 5
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值