使用Axios GET下载原始二进制ZIP文件时数据损坏问题

问题现象 #

• 现有返回原始二进制ZIP数据的端点，通过Postman「保存到文件」或浏览器直接访问，均可正常下载并解压，确认原始二进制数据无问题。
• 使用Axios下载后ZIP文件损坏：
  • 未设置Content-Length头部时，提示缺失26字节，解压报错：Unable to expand 'test.zip' (Error 79 - Inappropriate file type of format)
  • 设置Content-Length头部后，报错：Unable to expand 'test.zip' (Error 1 - No such process)
• 已尝试调整Axios配置：修改responseType为stream/arraybuffer/blob、responseEncoding设为null/utf8/binary，均无法解决。
• 注：用Axios下载同类型原始二进制PDF数据可正常工作。

相关代码 #

// handling the axios request
getZipFile: ({}) => Axios.get('/zipfile', { params: {...} }, {
  responseType: 'arraybuffer',
  responseEncoding: null,
  maxContentLength: 20000,
  transformResponse: data => data,
})

// handling the axios response
const { data, headers = {} } = await getZipFile({})
console.log(data) // returns corrupted raw binary zip data

res.setHeader('Content-Type', 'application/zip');
res.setHeader('Content-Disposition', 'attachment; filename="test.zip"');
return res.end(data);

环境版本 #

• Axios 1.3.5
• Node 17.9.0
• Express 4.18.2

修复方案 #

1. 修正Axios请求参数格式 #

原代码中Axios.get的参数传递错误，get方法的第二个参数即为配置对象，无需拆分，错误的参数格式导致responseType等配置未生效，引发二进制数据转码损坏。

修正后的请求代码：

getZipFile: ({}) => Axios.get('/zipfile', {
  params: {...},
  responseType: 'arraybuffer',
  responseEncoding: 'binary', // 明确指定二进制编码，避免默认转码
  maxContentLength: Infinity, // 移除过小的长度限制，或设置为足够大的值
  transformResponse: data => data, // 禁用默认JSON转换
})

2. 优化Express响应处理 #

直接使用res.end(data)处理arraybuffer易出现编码问题，改用res.send(data)更可靠；若需设置Content-Length，需从响应头获取原始长度，避免手动估算：

const { data, headers = {} } = await getZipFile({})
res.setHeader('Content-Type', 'application/zip');
res.setHeader('Content-Disposition', 'attachment; filename="test.zip"');
// 正确设置Content-Length
if (headers['content-length']) {
  res.setHeader('Content-Length', headers['content-length']);
}
res.send(data); // Express会自动处理二进制数据的传输编码

3. 移除不合理的长度限制 #

原代码中maxContentLength: 20000仅允许20KB数据传输，若实际ZIP文件超过该大小会被截断，直接移除或设置为Infinity即可。

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