Next.js 13注册表单两次POST请求，第二次返回500错误求助

• 检查json-server端点规则
  json-server对单数命名的端点（如/currentUser）处理逻辑和复数不同：默认POST到单数端点会尝试更新已存在的单条记录，若该资源不存在或请求体不符合字段要求，会返回500错误。你可以查看json-server的控制台日志，确认错误的具体原因；如果/currentUser是用来存储当前登录状态，建议改用PUT请求更新，或者每次提交前先删除旧的currentUser记录。

• 修正Next.js表单提交逻辑

  • 确保表单提交时调用event.preventDefault()，阻止默认页面跳转，避免因页面刷新导致请求状态异常。
  • 将两个请求改为串行执行：用await依次发送请求，确保第一个请求完成后再发起第二个，避免json-server并发处理冲突，示例代码如下：

    const handleSubmit = async (e) => {
      e.preventDefault();
      try {
        // 先提交到users
        await fetch('http://your-json-server-url/users', {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify(formData)
        });
        // 再提交到currentUser
        await fetch('http://your-json-server-url/currentUser', {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify(formData)
        });
      } catch (err) {
        console.error('提交错误:', err);
        // 这里不要直接触发not-found跳转，先做错误提示
      }
    };
    

  • 检查代码中是否在请求失败时错误调用了notFound()或导航到404路由，这会导致页面跳转到not-found页面。

• 调试请求细节

  • 打开浏览器开发者工具的Network面板，对比两次请求的请求头、请求体，确认第二次请求的参数是否正确；
  • 在请求中添加完整的错误捕获，打印详细错误信息到控制台，方便定位问题。

• 验证json-server数据结构
  打开json-server的db.json文件，确认users是数组类型，currentUser是对象类型。如果currentUser已存在，第二次POST会尝试更新该对象，若请求体缺少必要字段或类型不匹配，会引发500错误。

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