NextJS 13.2表单与API端点连接返回400错误求助

1. 检查请求方法是否匹配 #

• 前端表单提交的方法（比如POST）必须和后端API端点处理的方法完全一致。
  • 若使用App Router（文件路径为app/api/[路由名]/route.js），确保导出对应方法的处理函数：

    export async function POST(request) {
      // 业务逻辑处理
    }
    

  • 若使用Pages Router（文件路径为pages/api/[路由名].js），需在函数内判断请求方法：

    export default function handler(req, res) {
      if (req.method !== 'POST') {
        return res.status(405).json({ message: '不允许该请求方法' });
      }
      // 业务逻辑处理
    }
    

2. 确认前端数据提交格式与请求头 #

• 若用fetch提交JSON数据，必须设置Content-Type请求头，并将数据转为JSON字符串：

  const submitForm = async (formData) => {
    const response = await fetch('/api/submit', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify(formData),
    });
    // 后续响应处理
  };
  

• 若使用原生HTML表单提交（<form method="POST">），默认格式为application/x-www-form-urlencoded，后端需用对应方式解析：App Router用await request.formData()，Pages Router直接读取req.body（NextJS已默认配置解析）。

3. 正确解析App Router中的请求体 #

NextJS 13 App Router的API路由中，request.body无法直接读取，需手动解析：

export async function POST(request) {
  try {
    const body = await request.json(); // 解析JSON格式数据
    // 若为表单格式则用：const formData = await request.formData();
    console.log('解析后的请求体:', body);
    // 数据库操作等业务逻辑
    return new Response(JSON.stringify({ success: true }), { status: 200 });
  } catch (error) {
    return new Response(JSON.stringify({ error: '请求体格式无效' }), { status: 400 });
  }
}

如果前端提交的格式与解析方式不匹配，会抛出解析错误，直接返回400，需检查前端数据格式是否正确。

4. 排查数据库连接与权限 #

• 确保Vercel控制台已配置PostgreSQL连接字符串（如POSTGRES_URL），本地开发需在.env.local文件中同步配置该变量。
• 确认数据库用户具备对应操作权限（如INSERT），可在后端添加数据库操作的错误日志排查：

  try {
    await sql`INSERT INTO your_table (col1, col2) VALUES (${val1}, ${val2})`;
  } catch (dbError) {
    console.error('数据库操作错误:', dbError);
    return new Response(JSON.stringify({ error: dbError.message }), { status: 500 });
  }
  

5. 本地调试技巧 #

• 在后端API路由中添加日志，打印请求方法、请求头、解析后的内容，确认数据是否正常到达：

  export async function POST(request) {
    console.log('请求方法:', request.method);
    console.log('请求头:', request.headers);
    try {
      const body = await request.json();
      console.log('解析后的请求体:', body);
      // ...业务逻辑
    } catch (e) {
      console.log('请求体解析失败:', e);
      return new Response(JSON.stringify({ error: '解析请求体失败' }), { status: 400 });
    }
  }
  

• 使用curl或Postman直接调用API，排除前端代码问题：

  curl -X POST http://localhost:3000/api/submit -H "Content-Type: application/json" -d '{"name":"测试","email":"test@example.com"}'
  

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