NextJS前后端传递Buffer遇阻：如何正确处理？

你遇到的问题本质是JSON不原生支持Node.js的Buffer类型：

• 后端调用res.json()时，Node.js会自动将Buffer序列化为{type: 'Buffer', data: 数组}这样的普通JavaScript对象，而非保留Buffer实例。
• 前端接收到的只是这个普通对象，不是Node.js的Buffer实例，所以Buffer.isBuffer()会返回false，直接调用toString()也只会输出对象的默认字符串[object Object]。

方案一：将Buffer转为Base64字符串传递（推荐） #

后端修改：

把Buffer转成Base64字符串后再返回：

// 转换Buffer为Base64
const serializedConfig = {
  ...nodeConfiguration,
  nodeId: nodeConfiguration.nodeId.toString('base64')
};
res.status(200).json(serializedConfig);

前端还原：

接收到字符串后，用Buffer.from()转回Buffer（浏览器环境可改用Uint8Array处理）：

// NextJS前端（Node.js环境）
const nodeIdBuffer = Buffer.from(data.nodeId, 'base64');

// 浏览器环境替代方案
const binaryStr = atob(data.nodeId);
const nodeIdUint8 = new Uint8Array(binaryStr.length);
for (let i = 0; i < binaryStr.length; i++) {
  nodeIdUint8[i] = binaryStr.charCodeAt(i);
}

方案二：将Buffer转为十六进制字符串传递 #

后端修改：

const serializedConfig = {
  ...nodeConfiguration,
  nodeId: nodeConfiguration.nodeId.toString('hex')
};
res.status(200).json(serializedConfig);

前端还原：

const nodeIdBuffer = Buffer.from(data.nodeId, 'hex');

方案三：直接返回Buffer二进制数据（适用于单独传递Buffer的场景） #

如果API仅需返回Buffer内容，可直接返回二进制：

res.status(200).setHeader('Content-Type', 'application/octet-stream');
res.send(nodeConfiguration.nodeId);

前端接收时用response.arrayBuffer()处理：

const response = await fetch('/api/your-route');
const arrayBuffer = await response.arrayBuffer();
const nodeIdBuffer = Buffer.from(arrayBuffer); // Node.js环境
// 浏览器环境用Uint8Array
const nodeIdUint8 = new Uint8Array(arrayBuffer);

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