Laravel streamDownload/download接口Axios请求返回字符串不触发下载问题

问题根本原因 #

原生form的提交行为由浏览器内核直接控制，收到带有Content-Disposition: attachment的响应时，会自动触发内置的下载流程；而Axios基于XMLHttpRequest实现异步请求，所有响应内容会先返回至JS上下文，浏览器不会主动识别附件响应头并触发下载，这就是两种提交方式表现差异的核心原因，和后端响应逻辑、响应头配置无关。

解决方案 #

无需修改后端现有返回逻辑，仅需调整前端Axios请求及响应处理逻辑即可：

步骤1：修改Axios请求配置，指定响应类型为Blob #

// formData为你要提交的表单数据
axios.post('/你的接口地址', formData, {
  headers: {
    'Content-Type': 'multipart/form-data',
    'X-CSRF-TOKEN': csrfToken
  },
  // 新增核心配置：指定响应内容以二进制Blob格式返回
  responseType: 'blob'
})

步骤2：拿到响应后手动触发浏览器下载 #

.then(res => {
  // 从响应头提取文件名，也可直接前端自定义
  let fileName = 'myFile.csv'
  const contentDisposition = res.headers['content-disposition']
  if (contentDisposition) {
    const nameMatch = contentDisposition.match(/filename="?([^"]+)"?/)
    if (nameMatch) fileName = decodeURIComponent(nameMatch[1])
  }

  // 生成临时下载链接并模拟点击
  const blob = new Blob([res.data], { type: res.headers['content-type'] })
  const downloadUrl = window.URL.createObjectURL(blob)
  const tempLink = document.createElement('a')
  tempLink.href = downloadUrl
  tempLink.download = fileName
  tempLink.click()
  // 释放临时URL占用的内存
  window.URL.revokeObjectURL(downloadUrl)
})
.catch(error => {
  // 错误处理：因指定了responseType为blob，错误响应内容也为blob格式，需手动转文本读取错误信息
  if (error.response?.data instanceof Blob) {
    error.response.data.text().then(errText => {
      // 按需处理错误提示，比如弹窗提示下载失败
      console.error('下载失败：', errText)
    })
  } else {
    console.error('请求异常：', error)
  }
})

注意事项 #

如果是跨域请求场景，前端默认无法读取Content-Disposition响应头，需要后端在响应头中新增配置Access-Control-Expose-Headers: Content-Disposition即可；如果不想额外配置后端，也可直接前端写死下载文件名。

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