如何将数据管道传输至Next.js 13 API响应？

API 探路者

2026-8-10

解决Next.js API中fetch响应管道传输的问题

问题原因

之前的代码依赖Node.js旧版fetch返回的Node.js Stream（带pipe方法），但现在Next.js使用的是符合Web标准的fetch API，返回的response.body是Web Streams API的ReadableStream，仅支持pipeTo/pipeThrough，而Next.js的NextApiResponse基于Node.js的http.ServerResponse，不属于Web标准的WritableStream，无法直接适配。直接转Blob再res.send会因响应头缺失、内存加载问题导致前端解析的数据损坏。

解决方案：转换Web流为Node.js流后管道传输

利用Node.js内置的stream.Readable.fromWeb()方法，将Web标准的ReadableStream转换为Node.js原生Readable流，再通过pipe传递给Next.js的响应对象，同时复制原响应的头信息确保前端正确解析：

import { Readable } from 'stream';

export default async function handler(req, res) {
  try {
    const fetchRes = await fetch(req.body.url);

    // 复制原响应的所有头信息，包括Content-Type、Content-Length等
    for (const [key, value] of fetchRes.headers) {
      res.setHeader(key, value);
    }
    // 设置响应状态码与原请求一致
    res.status(fetchRes.status);

    // 将Web ReadableStream转换为Node.js可读流，管道传输到响应
    const nodeReadableStream = Readable.fromWeb(fetchRes.body);
    nodeReadableStream.pipe(res);
  } catch (err) {
    console.error(err);
    res.status(500).send("Invalid Url");
  }
}

为什么Blob方法会失败？

内存压力：await r.blob()会将整个响应内容加载到内存中，处理大文件时会导致性能问题甚至内存溢出。
响应头缺失：直接res.send(blob)不会自动复制原响应的关键头信息（如Content-Type、Content-Disposition），前端解析Blob时无法识别正确的文件类型，导致数据损坏。
流处理不兼容：res.send(blob.stream())没有正确处理流的结束和错误，可能导致传输中断。