Node服务器接收Vue端Fetch发送的ArrayBuffer请求体时显示Undefined问题求助

嗨，我来帮你搞定这个问题！你遇到的情况其实很常见——express.json()中间件只负责解析JSON格式的请求体，而你发送的是二进制的ArrayBuffer音频数据，服务器根本不知道该怎么处理，所以req.body才会变成undefined。

下面是具体的解决方案，分客户端和服务器端两部分修改：

服务器端修改：使用express.raw()中间件解析二进制数据 #

Express提供了专门处理二进制数据的express.raw()中间件，我们需要针对你的音频接口配置它，指定对应的Content-Type：

const express = require('express');
const path = require('path');
const app = express(), port = 3080;

// 给/api/query接口配置raw中间件，解析audio/mp3类型的二进制数据
app.use('/api/query', express.raw({ type: 'audio/mp3' }));

app.post('/api/query', async (req, res) => {
  const audioBuffer = req.body; // 现在req.body是Buffer类型
  console.log('Received audio buffer: ', audioBuffer);
  
  // 如果需要把Buffer转成ArrayBuffer，可以这么做：
  const audioArrayBuffer = audioBuffer.buffer;
  
  /* 在这里执行你的音频处理逻辑... */
  
  res.sendStatus(200); // 返回成功状态码
});

app.listen(port, () => {
  console.log(`Server running on port ${port}`);
});

如果你的接口需要支持多种音频格式（比如mp3、wav），可以把type改成'audio/*'，这样就能匹配所有音频类型的请求了。

客户端修改：恢复Content-Type请求头 #

你之前注释掉了Content-Type头，这会让服务器无法识别请求体的类型，所以一定要把它加回去：

export async function makeQuery(data) {
  let bufferAudio = await data.arrayBuffer();
  console.log(bufferAudio);
  
  try {
    const response = await fetch(`/api/query`, {
      method: 'POST',
      headers: {'Content-Type': 'audio/mp3'}, // 必须设置正确的Content-Type
      body: bufferAudio,
    });
    return response;
  } catch(e) {
    console.log("Request error: ", e);
    throw e; // 建议抛出错误，方便调用方处理异常
  }
}

补充说明 #

• express.raw()会将请求体解析为Node.js的Buffer对象，如果你需要在服务器端使用ArrayBuffer，可以通过buffer.buffer属性转换。
• 确保客户端设置的Content-Type和服务器端express.raw()配置的type完全匹配，否则中间件不会处理该请求。

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