Express+Axios场景下内存JSON转.json文件浏览器下载失效

后端响应头配置本身无语法错误，无法触发下载的核心原因：Axios是封装XMLHttpRequest实现的AJAX请求，这类由JavaScript主动发起的请求，即使服务端返回Content-Disposition: attachment响应头，浏览器也不会自动弹出文件保存弹窗，响应内容会直接被Axios接收后交由前端JS逻辑处理，不会走浏览器默认的资源下载流程。

二选一即可：

• 方案1：保留现有Axios请求逻辑，前端接收响应后手动触发下载
  不需要改动后端现有核心逻辑，前端拿到Axios响应后，将内容转为Blob对象生成临时地址，主动触发下载即可，前端参考代码：

  import axios from 'axios'
  
  const updateAndDownload = async (productId) => {
    const res = await axios.put('/your/api/route', { productId }, {
      // 必须指定响应类型为blob，避免二进制数据被转码损坏
      responseType: 'blob'
    })
    // 从响应头解析后端返回的文件名
    const contentDisposition = res.headers['content-disposition']
    const fileName = decodeURI(contentDisposition.match(/filename="?([^"]+)"?/)[1])
    // 生成临时资源地址
    const blob = new Blob([res.data], { type: 'application/json' })
    const tempUrl = window.URL.createObjectURL(blob)
    // 创建临时a标签触发下载
    const link = document.createElement('a')
    link.href = tempUrl
    link.download = fileName
    document.body.appendChild(link)
    link.click()
    // 清理临时资源
    document.body.removeChild(link)
    window.URL.revokeObjectURL(tempUrl)
  }
  

• 方案2：弃用Axios发起该请求，用浏览器原生机制触发下载
  如果不想写前端Blob处理逻辑，可以将该接口改为支持原生表单提交，或调整为GET请求后通过带download属性的a标签跳转请求地址，浏览器会自动识别下载响应头触发保存，不需要额外编写JS下载逻辑。

后端代码优化建议 #

当前代码中构造PassThrough流传输内存JSON属于冗余操作，同时存在文件名乱码、Content-Type不标准的问题，优化后代码如下：

const dispenseProduct = async (req, res) => {
    try {
        const { productId } = req.body
        const product = await Products.findOne({ where: { productId } })
        const updatedProduct = await product.update({ currentInventory: --product.currentInventory })
        
        // 文件名含中文/特殊字符时必须编码，避免乱码
        const fileName = encodeURIComponent(`${updatedProduct.name}.json`)
        res.setHeader('Content-Disposition', `attachment; filename="${fileName}"`)
        // 使用标准JSON Content-Type
        res.setHeader('Content-Type', 'application/json')
        // 直接发送JSON数据即可，无需额外构造流
        res.send(updatedProduct)
    } catch (err) {
        return catchErr(err, res)
    }
}

注意：如果前端用方案1，后端对文件名做encodeURIComponent编码后，前端对应的decodeURI解码逻辑要保留，否则文件名会显示编码后的字符。

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