Next.js中使用Formik与Yup时表单数据无法传递至API端点，服务器端获取值为undefined的问题

嗨，我来帮你排查这个问题！你遇到的这种客户端能看到表单数据，但服务器端拿不到、请求体为空且bodyUsed为false的情况，通常是请求发送格式或者服务器端处理逻辑的小疏漏，咱们一步步来解决：

一、先检查客户端的请求发送逻辑 #

从你给出的代码片段来看，Formik的onSubmit方法里应该是要发送请求到API端点，但大概率是没正确处理请求体的序列化和请求头设置。正确的写法应该是这样的：

onSubmit: async (values) => {
  try {
    setLoading(true);
    // 发送POST请求到你的API端点
    const response = await fetch('/api/contact', {
      method: 'POST',
      // 必须设置这个请求头，告诉服务器我们发送的是JSON格式数据
      headers: {
        'Content-Type': 'application/json',
      },
      // 把Formik的values对象序列化成JSON字符串
      body: JSON.stringify(values),
    });

    // 这里可以根据响应结果做后续处理，比如提示成功
    if (response.ok) {
      setProcessed(true);
    }
  } catch (error) {
    console.error('提交失败:', error);
  } finally {
    setLoading(false);
  }
}

如果没设置Content-Type或者没序列化数据，服务器端就无法正确解析请求体，自然会拿到undefined，同时因为请求体没被读取过，bodyUsed会保持false。

二、检查服务器端API路由的处理逻辑 #

不管你用的是Next.js的App Router还是Pages Router，都需要正确读取请求体：

如果你用的是App Router（比如app/api/contact/route.js）：

export async function POST(request) {
  // 必须用await来读取请求体，这里是JSON格式
  const formData = await request.json();
  console.log('服务器端收到的表单数据:', formData);
  
  // 这里写你的业务逻辑，比如存入数据库、发送邮件等
  return new Response(JSON.stringify({ message: '表单提交成功' }), {
    status: 200,
    headers: { 'Content-Type': 'application/json' },
  });
}

如果你用的是Pages Router（比如pages/api/contact.js）：

export default async function handler(req, res) {
  if (req.method === 'POST') {
    // Pages Router里req.body会自动解析，但前提是客户端发送的是正确的JSON格式
    console.log('服务器端收到的表单数据:', req.body);
    
    // 业务逻辑处理
    res.status(200).json({ message: '表单提交成功' });
  } else {
    res.status(405).json({ message: '只支持POST请求' });
  }
}

注意：在App Router中，request.json()只能调用一次，如果你之前调用过request.text()或其他读取方法，bodyUsed会变成true，但如果完全没调用，请求体就会是空的。

三、排除其他可能的小问题 #

• 确认API端点的路径是否正确：客户端fetch的路径要和服务器端路由的路径完全一致，别出现拼写错误或者路径层级错误。
• 如果你表单里有文件上传，那不能用JSON格式，得用FormData来传递，但看你的initialValues都是文本字段，所以用JSON就没问题。
• 检查是否有跨域问题：如果你的API是部署在外部域名，需要配置CORS，但如果是Next.js同域的API路由，这一步可以忽略。

按照上面的步骤检查调整后，应该就能解决服务器端拿不到表单数据的问题啦！

备注：内容来源于stack exchange，提问作者medOnline5