React前端无法向Node.js后端发送消息求助

你遇到的问题是前端联系表单提交时出现404错误，无法成功向后端发送数据；此前将网站与后端同端口部署时，会发送内容为undefined的邮件，且刷新后网站无法正常工作。下面是具体排查和修复方案：

一、修复后端核心问题：缺失Nodemailer传输实例 #

你的后端代码中调用了transport.sendMail，但未定义transport变量，这会导致后端运行报错，无法正确处理请求。需要补充Nodemailer传输对象的创建代码：

修改后端代码，在// email details here位置添加以下内容：

// 创建Nodemailer传输对象
var transport = nodemailer.createTransport({
  service: 'Gmail', // 根据你的邮箱类型选择，如Outlook、QQ邮箱等
  auth: {
    user: creds.user, // 你的邮箱账号，来自config.js配置文件
    pass: creds.pass  // 你的邮箱密码/授权码，来自config.js配置文件
  }
});

确保config.js包含正确的邮箱认证信息，示例：

// config.js
module.exports = {
  user: "your-email@example.com",
  pass: "your-email-password-or-app-specific-password"
};

二、确认后端路由与前端请求地址匹配 #

前端请求地址为http://localhost:3002/send，后端router.post("/send")配合app.use("/", router)的路由配置是正确的，但需确保：

• 后端确实在3002端口启动，控制台无报错信息
• 用Postman或curl测试后端路由：发送POST请求到http://localhost:3002/send，携带JSON格式的请求体（如{"name":"测试", "email":"test@example.com", "message":"测试内容"}），检查是否能收到{"status":"success"}或{"status":"fail"}的响应。若测试失败，说明后端路由或配置存在问题。

三、优化CORS配置（解决跨域限制） #

虽然你使用了cors()中间件，但可明确指定允许的前端域名，避免潜在的跨域限制：

// 替换原app.use(cors())为以下代码
app.use(cors({
  origin: "http://localhost:3000", // 你的前端网站运行的地址和端口
  credentials: true
}));

四、前端代码优化与错误处理 #

统一Fetch写法并添加错误捕获逻辑（如404、网络错误等）：

async function handleSubmit(event) {
  event.preventDefault();
  const form = event.target;
  const formInfo = new FormData(form);
  const jsonBody = JSON.stringify(Object.fromEntries(formInfo));
  
  try {
    const response = await fetch("http://localhost:3002/send", {
      method: "POST",
      body: jsonBody,
      headers: {
        "Accept": "application/json",
        "Content-Type": "application/json"
      }
    });

    if (!response.ok) {
      throw new Error(`HTTP错误！状态码: ${response.status}`);
    }

    const result = await response.json();
    if (result.status === "success") {
      alert("消息发送成功。");
      form.reset(); // 替换原this.resetForm()，普通函数中this并非表单实例
    } else {
      alert("消息发送失败。");
    }
  } catch (error) {
    console.error("请求失败:", error);
    alert("发送失败，请检查网络或后端运行状态");
  }
}

五、避免端口冲突问题 #

此前将网站与后端部署在同一3000端口导致冲突，现在分开使用不同端口（如前端3000、后端3002）是正确做法，需确保两个服务分别启动，端口不重复。

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