vue下载文件超过10M被拒绝

原文链接:https://www.jianshu.com/p/3810d7e463b1

一 问题现象

昨天一朋友遇到超过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'

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