React+Express构建的联系表单无法发送邮件 提交后无响应求助

问题排查与修复方案 #

1. 前端参数错误+缺少异常捕获

你前端提交的details对象字段映射错误，把手机号存到了message字段，后端无法正常读取到phone值；同时没有对异步请求加异常捕获，请求报错后代码直接中断，导致按钮一直停留在Sending...状态。
修复代码如下：

const handleSubmit = async (e) => {
  e.preventDefault();
  setStatus("Sending...");
  try {
    const { name, email,phone, text } = e.target.elements;
    let details = {
      name: name.value,
      email: email.value,
      phone: phone.value, // 修正字段名，和后端接收参数对应
      text: text.value,
    };
    let response = await fetch("http://localhost:5000/contact", {
      method: "POST",
      headers: {
        "Content-Type": "application/json;charset=utf-8",
      },
      body: JSON.stringify(details),
    });
    let result = await response.json();
    alert(result.status);
  } catch (err) {
    console.error("提交错误：", err);
    alert("提交失败，请稍后重试");
  } finally {
    // 无论请求成功失败都重置按钮状态
    setStatus("Submit");
  }
};

2. 后端发件配置错误

Gmail早在2022年就停止支持「低安全等级应用」访问，仅降低安全等级无法正常发信，需要按以下要求调整：

• 先给你的谷歌账号开启两步验证，然后生成16位应用密码，把contactEmail配置里的pass替换成生成的应用密码，不能使用账号本身的登录密码
• Gmail不允许直接使用用户填写的邮箱作为发件人，会被系统拦截，修改邮件配置的发件人字段，把用户邮箱放到回复字段即可：

const mail = {
  from: `联系表单 <my_email@gmail.com>`, // 必须是你完成认证的Gmail地址
  replyTo: email, // 你在邮箱直接回复邮件会自动发送到用户的邮箱
  to: "slavagodlevsky@gmail.com",
  subject: "Contact Form Message",
  html: `<p>Name: ${name}</p><p>Email: ${email}</p><p>Phone: ${phone}</p><p>Message: ${text}</p>`,
};

3. 连通性验证

• 先确认后端启动后控制台打印了Server Running和Ready to Send，如果没有打印Ready to Send说明邮箱认证失败，重新检查Gmail的配置
• 在后端/contact接口的开头添加console.log('收到参数：', req.body)，提交表单后观察后端控制台是否正常打印参数，确认前后端请求连通正常

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