Next.js 10 + React 17 集成 Nodemailer 联系表单移动端发信失败

一、先定位前端请求链路的显性bug #

对照现有代码的逻辑，先修正会直接导致移动端提交无响应的问题：

• 前端提交逻辑的异常分支存在逻辑漏洞：现有onSubmitForm方法的catch块没有将加载状态重置为false，且直接读取未赋值的data.error。如果请求本身失败（网络中断、接口超时、被拦截），data会是undefined，读取属性会触发新的脚本错误，用户端会永久卡在加载状态，完全看不到错误提示。修正后的代码块为：

catch (err) {
  setIsLoading(false);
  reset();
  return toast.error("表单提交失败，请稍后重试", {
    position: toast.POSITION.TOP_CENTER
  });
}

• 检查移动端请求的基础访问环境：
  • 确认移动端访问站点时是否存在混合内容拦截：如果站点部署在HTTPS域名下，移动端通过HTTP入口访问时，浏览器会直接拦截所有跨域的POST请求，桌面端日常访问HTTPS版本不会遇到这类限制。
  • 核对CORS配置匹配范围：现有CORS规则写死仅允许https://www.veritas101.com来源的请求，只要移动端访问的域名带/不带www、直接用IP访问、走HTTP协议，就会触发跨域拦截，请求根本到不了服务端。

二、排查服务端发信逻辑的隐性问题 #

现有服务端代码存在几个容易导致发信静默失败的设计问题，在移动端网络环境下会被放大：

• 修正Nodemailer的发件人配置：现有代码直接将用户输入的邮箱作为from字段，Gmail SMTP服务不允许无身份校验的第三方邮箱作为发件人身份，这类伪造发件人的邮件很容易被Gmail反垃圾系统静默拦截。正确的配置是固定发件人为SMTP认证账号，将用户输入的邮箱放到replyTo字段，收到邮件后可以直接回复用户输入的地址：

const mailData = {
  from: process.env.NEXT_PUBLIC_USER_EMAIL,
  replyTo: email,
  to: process.env.NEXT_PUBLIC_USER_EMAIL,
  subject: `Contact form submission from ${name}`,
  html: `<!-- 原有邮件正文内容 -->`
}

• 移除多余的SMTP校验逻辑：现有代码在每个接口请求流程里都调用transporter.verify()做连接校验，这个操作会额外建立一次SMTP连接，移动端网络不稳定时，校验流程超时会直接导致整个请求挂起。这类校验只需要在服务启动时执行一次即可，不需要绑定到每个请求上。
• 补全服务端的异常捕获：现有代码直接awaittransporter.sendMail()，没有做错误捕获。如果发信过程中因为网络波动、内容触发反垃圾规则抛错，Next.js的接口路由会直接崩溃返回500错误，前端无法拿到预期的JSON响应，触发之前提到的加载卡死问题。需要给sendMail的调用套上try/catch，将具体错误信息返回给前端。

三、排查移动端专属的触发因素 #

• 检查浏览器拦截规则：移动端浏览器如果安装了广告拦截插件，会自动拦截路径包含/api/contact的请求（这类路径容易被插件识别为广告追踪接口），桌面端如果没有安装同类插件就不会出现拦截问题。
• 检查邮件的投递位置：如果请求实际已经发出去、SMTP也返回了成功响应，可以先去Gmail的垃圾邮件文件夹、已拦截邮件列表里查找，移动端用户提交的内容往往带有更多换行、口语化表述，很容易被反垃圾规则误判，不会直接进入收件箱。
• 检查移动端自动填充的干扰：移动端浏览器在用户点击提交按钮时，经常会自动触发表单校验、切走输入焦点，导致React-Hook-Form无法拿到完整的表单值，不会正常触发提交逻辑。可以在提交按钮的点击事件里加原生的preventDefault()兜底，避免浏览器默认行为打断JS提交流程。

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