React应用：服务器响应异常与联系表单提交失败问题

一、修复404路由错误 #

• 检查Server.js路由注册：
  • 确认/status的GET请求处理函数已定义
  • 确认/contact路由同时处理GET（如果业务需要）和POST请求，不少开发者会遗漏GET处理导致404
• 验证服务器端口：确保Server.js中app.listen(1337, ...)的端口号与前端请求目标一致
• 核对React proxy配置：在前端项目package.json中添加"proxy": "http://localhost:1337"，前端请求时使用相对路径（如fetch('/contact')），避免写完整URL
• 确认服务器状态：查看后端终端日志，是否有“Server running on port 1337”类的启动成功提示

二、解决reCaptcha验证状态不更新导致的表单无法提交 #

• 检查前端状态更新逻辑：在Contact.jsx的reCaptcha回调（如onChange）中，必须调用setValid(true)标记验证通过
• 确保令牌正确传递：前端要将reCaptcha返回的token（而非仅依赖前端本地状态）随表单数据一起传给后端
• 后端验证逻辑闭环：
  1. 后端调用Google reCaptcha验证API，传入secret key和前端发送的token
  2. 仅当验证通过后，才执行邮件发送逻辑，并向前端返回成功响应
  3. 前端根据后端响应结果更新valid状态，不要仅靠前端本地判断
• 表单提交按钮逻辑：按钮禁用条件需同时包含valid为true和所有表单字段非空，避免状态不同步

三、修复邮件内容返回null的问题 #

• 检查表单数据收集：Contact.jsx中每个表单字段必须正确绑定state，提交时确保所有字段数据都传入请求体
• 配置请求体解析中间件：Server.js中必须添加app.use(express.json())和app.use(express.urlencoded({ extended: true }))，否则无法读取req.body中的数据
• 核对Nodemailer邮件配置：确保mailOptions的text/html字段正确使用req.body的数据，示例：

  const mailOptions = {
    from: req.body.email,
    to: 'your-email@example.com',
    subject: 'New Contact Form Submission',
    text: `Name: ${req.body.name}\nEmail: ${req.body.email}\nMessage: ${req.body.message}`
  };
  

• 直接测试后端接口：用Postman发送POST请求到http://localhost:1337/contact，携带正确的表单数据和reCaptcha token，查看req.body是否有值，以及是否能成功发送邮件

通用排查步骤 #

• 打开浏览器DevTools的Network面板：查看请求的方法、URL、请求体内容和后端响应，确认请求是否正确发送
• 查看后端终端日志：检查是否有路由错误、reCaptcha验证失败、Nodemailer配置报错等信息
• 确认reCaptcha密钥：确保前端site key和后端secret key正确无误，且未被Google限制

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