Next.js 13.4 App Router POST接口无法解析JSON请求体报错

错误原因 #

你用Postman以form-data格式发送请求，但后端接口里用req.json()尝试解析请求体——form-data属于multipart/form-data类型的表单数据，并非JSON格式，因此JSON解析器会直接抛出语法错误。

两种解决办法 #

办法一：后端适配form-data格式 #

修改app/api/testPost/route.tsx中的代码，使用FormData API解析请求体：

export async function POST(req: Request) {
  try {
    const formData = await req.formData();
    // 根据实际字段名获取数据，示例假设字段为username、password
    const username = formData.get('username');
    const password = formData.get('password');
    
    console.log('接收的form-data:', { username, password });
    return new Response("ok", { status: 200 });
  } catch (error) {
    console.error('处理form-data出错:', error);
    return new Response("处理失败", { status: 500 });
  }
}

如果需要处理文件上传，formData.get('file')会返回File对象，可进一步读取文件内容做后续处理。

办法二：前端（Postman）改用JSON格式发送请求 #

无需修改后端代码，调整Postman的请求设置即可：

• 切换到Body标签页，选择raw选项
• 右侧下拉菜单选择JSON格式
• 在输入框中填写JSON格式的请求体，示例：

  {
    "username": "test",
    "password": "123456"
  }
  

• 发送请求后，后端req.json()就能正常解析请求体。

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