使用Axios获取tar文件遇格式不支持，如何正确传输至前端？

问题根源 #

你后端的错误在于将获取到的Tar Blob包装成了JSON对象（res.send({ data: axiosRes.data })）发送给前端，这会导致Blob被序列化为JSON格式，前端拿到的不再是原始的二进制Tar数据，因此生成的文件格式无效。

修正方案 #

后端（Express）修改

直接转发原始的Tar二进制数据，不要包装成JSON，同时设置正确的响应头：

方式1：使用流转发（推荐，适合大文件）

// backend
const axiosRes = await axios.get(`${API}/file`, {
  headers: { Authorization: `Bearer ${token}` },
  responseType: 'stream' // 以流的方式获取数据，减少内存占用
});
// 设置响应的Content-Type为tar格式
res.type('application/x-tar');
// 将上游的流直接管道到Express响应
axiosRes.data.pipe(res);

方式2：使用Blob转发

// backend
const axiosRes = await axios.get(`${API}/file`, {
  headers: { Authorization: `Bearer ${token}` },
  responseType: 'blob'
});
// 设置正确的Content-Type头
res.setHeader('Content-Type', 'application/x-tar');
// 直接发送Blob数据，不要包装成JSON
res.send(axiosRes.data);

前端修改

前端直接请求后端的转发接口，设置responseType: 'blob'，然后用返回的Blob生成下载链接：

// frontend
const response = await axios.get('/your-backend-file-endpoint', {
  responseType: 'blob'
});
const url = window.URL.createObjectURL(response.data);
const link = document.createElement('a');
link.href = url;
link.setAttribute('download', 'file.tar');
document.body.appendChild(link);
link.click();
// 清理URL对象，避免内存泄漏
window.URL.revokeObjectURL(url);
document.body.removeChild(link);

额外说明 #

• 后端无需在请求头中设置Content-Type：你之前在axios请求头里加了'Content-Type': 'application/x-tar'，这是错误的，Content-Type用于标识请求体的类型，而GET请求没有请求体，仅需携带Authorization头即可。
• 流转发的优势：对于大文件来说，流可以边接收边发送，不会把整个文件加载到内存中，性能更优。

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