美文网首页
遇到前端axiso下载文件超过10M被拒绝的问题

遇到前端axiso下载文件超过10M被拒绝的问题

作者: 明翼 | 来源:发表于2020-07-12 10:45 被阅读0次

一 问题现象

昨天一朋友遇到超过10M文件,springboot下载文件被拒绝的问题,是秒拒绝。第一反应是不是springboot的配置了限制,通过检查配置,代码和配置中都有文件配置的代码,最大的大小设置为200MB了,根本不存在问题。

其他文件下载小于10MB的,哪怕是9.9MB的文件下载也不存在问题,所以排除了防火墙等问题。

Spring boot的后台提示是如下图:


报错提示

前台的错误提示是网络错误。

二 抓包排查

一连查了很久也没啥思路,所以就想至少我要知道是服务器段的问题还是axiso这个库的问题,所以进行了抓包,显示如下:


抓包

看到客户端在收到服务器端的数据后,接近收完了,发起了Reset报文,进行了中断,导致连接被断开。

三 前端代码

 download (url, params, filename) {
    NProgress.start()
    message.info("开始请求")
    return FEBS_REQUEST.post(url, params, {
      transformRequest: [(params) => {
        let result = ''
        Object.keys(params).forEach((key) => {
          if (!Object.is(params[key], undefined) && !Object.is(params[key], null)) {
            result += encodeURIComponent(key) + '=' + encodeURIComponent(params[key]) + '&'
          }
        })
        return result
      }],
      responseType: 'blob'
    }).then((r) => {
      const content = r.data
      const blob = new Blob([content])
      message.info("请求成功,开始下载...")
      if ('download' in document.createElement('a')) {
        const elink = document.createElement('a')
        elink.download = filename
        elink.style.display = 'none'
        elink.href = URL.createObjectURL(blob)
        document.body.appendChild(elink)
        elink.click()
        URL.revokeObjectURL(elink.href)
        document.body.removeChild(elink)
      } else {
        navigator.msSaveBlob(blob, filename)
      }
      NProgress.done()
    }).catch((r) => {
      console.error(r)
      message.error('下载失败,失败原因:' + r)
      NProgress.done()
    })

很多网上代码也是这样子的,后改造为:

 responseType: 'arraybuffer'

更改这种方式后,可以正常下载,我不知道什么原因,暂时记录下。

相关文章

网友评论

      本文标题:遇到前端axiso下载文件超过10M被拒绝的问题

      本文链接:https://www.haomeiwen.com/subject/yhjgcktx.html