NextJS 13 Route Handler解析表单数据JSON报错问题排查

这不是NextJS的Bug，是你用错了请求体解析方法——request.json()只能解析JSON格式的请求体，而你用Postman发的是application/x-www-form-urlencoded的表单格式（dqaf=ll），两者格式不匹配，自然会报“不是有效JSON”的错误。

解决步骤： #

• 改用request.formData()解析表单请求体
  App Router的Route Handler遵循Web标准的Request API，需要根据请求格式选择对应的解析方式。处理表单格式请求时，用formData()替代json()，示例代码：

  // app/contactForm/route.ts
  export async function POST(request: Request) {
    const formData = await request.formData();
    const dqaf = formData.get('dqaf'); // 获取表单字段值
    return Response.json({ receivedValue: dqaf });
  }
  

• 理解Pages Router和App Router的差异
  Pages Router的API路由默认会自动解析application/x-www-form-urlencoded格式的请求体，直接把数据放到req.body里；但App Router的Route Handler不会自动做这件事，必须手动调用对应解析方法，这是两者设计上的区别，不是Bug。

• 关于关闭bodyParser的误区
  你关闭bodyParser后仍报错，是因为这个配置只对Pages Router生效，App Router的Route Handler本身就没有内置的bodyParser，完全基于原生Request对象处理请求体，所以这个操作对它没用。

额外注意： #

确认Postman的请求头Content-Type为application/x-www-form-urlencoded（选择表单格式时Postman会自动设置，但最好手动检查一下）；如果是前端原生表单提交，默认就是这个格式，无需额外配置。

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