Node流式返回gzip附件至Angular2失败，求排查方案

你遇到的问题主要出在服务端的响应逻辑错误和客户端对二进制文件的处理方式不对这两个核心点上，咱们一步步拆解修复：

一、服务端代码的核心问题 #

1. 错误监听req.on('response')
   在Express的路由回调里，req是客户端发来的请求对象，它根本不会触发response事件——你应该直接操作res（服务端的响应对象）来返回数据，这个事件监听完全是多余且错误的。

2. 流处理逻辑颠倒且错误
   你现在的代码是把读取的文件流压缩后写入本地文件get_logs11.tar.gz，然后试图把这个可写流（fs.createWriteStream返回的是可写流）pipe到res，这完全不符合流的使用规则——只有可读流才能pipe到可写流（res本身是可写流）。

3. 响应头设置错误

   • 你返回的是tar.gz格式的文件，Content-Type应该设为application/gzip或者application/x-tar-gz，而不是application/x-zip；
   • 如果是直接返回已经gzip压缩好的tar文件，不需要设置Content-Encoding: gzip（这个头是告诉客户端“我返回的内容是gzip压缩的，你需要解压”，但你的文件本身就是gzip格式的，客户端下载后直接保存即可）；
   • Content-Disposition里的文件名要和实际文件格式匹配，比如filename=myFile.tar.gz。

修正后的服务端代码 #

app.get('/jsonrpc/download', function (req, res) { 
  const filePath = './log1.tar.gz';
  
  // 设置正确的响应头
  res.writeHeader(200, { 
    'Content-Type': 'application/gzip', 
    'Content-Disposition': 'attachment; filename=myFile.tar.gz'
  });

  // 流式读取文件→压缩→直接返回给客户端，无需写入本地文件（如果不需要留存的话）
  fs.createReadStream(filePath)
    .pipe(zlib.createGzip())
    .pipe(res)
    .on('error', (err) => {
      console.error('流式处理出错:', err);
      res.status(500).send('文件下载失败');
    });
});

如果你确实需要在服务端保存压缩后的文件，可以同时pipe到本地文件和响应对象：

const readStream = fs.createReadStream(filePath);
const gzipStream = zlib.createGzip();
const writeStream = fs.createWriteStream('./get_logs11.tar.gz');

readStream.pipe(gzipStream).pipe(writeStream);
gzipStream.pipe(res); // 同时把压缩后的流返回给客户端

二、客户端Angular代码的问题 #

Angular的HttpClient.get默认会把响应解析为JSON格式，而你要下载的是二进制文件，必须指定responseType: 'blob'，否则会把二进制数据当成文本解析，导致无法正确处理。另外，拿到Blob后需要手动触发浏览器的下载行为。

修正后的客户端代码 #

public downloadLogs(path: string) { 
  // 设置responseType为blob，告诉HttpClient返回二进制数据
  this.http.get(`http://localhost:4200/jsonrpc/download?path=${path}`, {
    responseType: 'blob'
  }).subscribe({
    next: (blob) => {
      // 创建下载链接并触发下载
      const url = window.URL.createObjectURL(blob);
      const downloadLink = document.createElement('a');
      downloadLink.href = url;
      downloadLink.download = 'myFile.tar.gz'; // 指定下载的文件名
      document.body.appendChild(downloadLink);
      downloadLink.click();
      // 清理资源
      window.URL.revokeObjectURL(url);
      document.body.removeChild(downloadLink);
    },
    error: (error) => {
      console.log('下载出错:', error);
    }
  });
}

额外说明 #

Chrome里显示“Provisional headers are shown”通常是因为请求没有正常完成（比如服务端响应逻辑错误，导致请求挂起或失败），修正服务端的响应逻辑后这个问题也会自动解决；另外建议把服务端的路由从/*改成具体的下载路由（比如/jsonrpc/download），避免和其他路由冲突。

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