javascript - 有没有办法将 ReadableStream 通过管道传输到 NextApiResponse？

Question

我想在我的 NextJS 应用程序中显示 Google Place Photos。要从指定的 URL 获取这些图像，需要 API key ，但与此同时，我不想向公众公开此 API key 。

我的目标是实现一个 NextJS API 路由，该路由从 Google Places Photos 获取并返回指定图像，同时还能够像这样直接从图像标签访问:

<img src={`/api/photos/${place?.photos[0].photo_reference}`} alt='' />

我在网上找到了一些不同的来源，它们建议我将来自 google 请求的响应流直接通过管道传输到传出响应的响应流，如下所示:

export default async function handler(
  req: NextApiRequest,
  res: NextApiResponse,
) {
  const response = await fetch(
    `https://maps.googleapis.com/maps/api/place/photo
  &photo_reference=${id}
  &key=${process.env.GOOGLE_PLACE_API_KEY}`,
  );

  if (!response.ok) {
    console.log(response);
    res.status(500).end();
    return;
  }

  response.body.pipe(res);
}

然而，由于 response.body 是一个 ReadableStream，它没有 .pipe() 函数。相反，它有 .pipeTo() 和 .pipeThrough()。

然后我尝试了

response.body.pipeTo(res);

但是，这也不起作用，因为 res 是 NextApiResponse 而不是 WritableStream。虽然我在网上搜索过，但我还没有找到类似WritableStreams的写入NextApiResponse的方法。

最后，我尝试手动将响应转换为缓冲区并将其写入 NextApiResponse，如下所示:

export default async function handler(
  req: NextApiRequest,
  res: NextApiResponse,
) {
  const response = await fetch(
    `https://maps.googleapis.com/maps/api/place/photo
  &photo_reference=${id}
  &key=${process.env.GOOGLE_PLACE_API_KEY}`,
  );

  if (!response.ok) {
    console.log(response);
    res.status(500).end();
    return;
  }

  const resBlob = await response.blob();
  const resBufferArray = await resBlob.arrayBuffer();
  const resBuffer = Buffer.from(resBufferArray);

  const fileType = await fileTypeFromBuffer(resBuffer);
  res.setHeader('Content-Type', fileType?.mime ?? 'application/octet-stream');
  res.setHeader('Content-Length', resBuffer.length);
  res.write(resBuffer, 'binary');
  res.end();
}

虽然这完成了响应，但没有显示任何图像。

我如何直接将检索到的 google places 图片从服务器传递到前端，以便它可以被标签使用？

Answer 1

对我有用的是简单地转换 response.body类型 ReadableStream<Uint8Array>到 NodeJS.ReadableStream然后使用 pipe功能。

const readableStream = response.body as unknown as NodeJS.ReadableStream;
readableStream.pipe(res);