Axios配置responseType为blob时无法获取500错误响应怎么解决？

你在请求配置中指定了responseType: 'blob'，Axios会将所有响应的返回数据统一转为Blob格式，即便是500错误返回的JSON错误信息，也会被封装为类型为application/json的Blob对象，因此直接打印error.response.data只能看到Blob实例，无法直接读取内部的JSON内容。

在catch块中判断Blob的MIME类型，如果是JSON格式的错误响应，通过FileReader读取Blob内容并解析为JSON即可拿到完整的错误信息，修改后的代码如下：

export const dowloadFilePDF = (data) => {
  return axios
    .request({
      method: 'GET',
      url: `${basePath + data[0]}`,
      responseType: 'blob',
      headers: { Authorization: Authorization },
    })
    .then(response => {
      console.log(response)
      let fileName = response.headers['content-disposition']?.split(';')[1]?.split('=')[1]?.split('"').join('')
      fileName = fileName ? fileName : 'data.pdf'
      fileDownload(response.data, fileName)
    })
    .catch(async (error) => {
      // 判断错误响应的Blob是否为JSON类型的错误信息
      if (error.response?.data?.type === 'application/json') {
        // 用FileReader读取Blob的文本内容
        const errorText = await new Promise((resolve) => {
          const reader = new FileReader()
          reader.onload = () => resolve(reader.result)
          reader.readAsText(error.response.data, 'utf-8')
        })
        // 解析为JSON对象得到完整错误响应
        const errorInfo = JSON.parse(errorText)
        console.log('500错误响应内容：', errorInfo)
        // 此处可添加自定义错误提示逻辑
      } else {
        // 非JSON类型的Blob错误按原有逻辑处理
        console.log(error)
      }
    })
}

如果你在项目中配置了全局Axios响应拦截器，也可以在拦截器中统一做Blob类型错误的预处理，避免每个下载类请求单独重复写判断逻辑。

内容的提问来源于stack exchange，提问作者tinyVariant