使用Express与Nodemailer向MailHog发邮件无响应求助

问题诊断与修复方案 #

1. 修复HTML语法错误 #

HTML footer部分存在标签闭合错误，会导致浏览器解析失败，直接阻止后续JavaScript代码执行：

<!-- 错误代码 -->
<p>footer/p>

<!-- 修复后 -->
<p>footer</p>

2. 统一表单提交事件逻辑 #

当前同时给<form>绑定onsubmit、给按钮绑定click事件，容易触发冲突。建议保留onsubmit事件，移除按钮的click监听：

// 删除以下冗余代码
const sendButton = document.getElementById('msg-btn');
sendButton.addEventListener('click', submitOrder);

按钮默认是submit类型，点击后会触发表单的onsubmit事件，此时event.preventDefault()会正常阻止页面跳转。

3. 确保前端函数正常执行 #

修复HTML后，打开浏览器控制台（F12）查看是否有submitOrder is not defined类报错：

• 确认script标签位于body末尾（当前位置正确）
• 刷新页面后重新测试，控制台应输出Function executed及客户表单数据

4. 调整后端路由顺序 #

server.js中app.get('*')通配路由需放在具体路由之后，避免影响静态文件和POST请求处理：

// 正确顺序：静态文件 → 具体路由 → 通配路由
app.use(express.static('pb'));

// POST 路由前置
app.post('/send-email', async (req, res) => {
  // ... 现有代码
});

// 通配GET路由后置
app.get('*', async (req, res, next) => {
  try {
    res.status(200);
    res.send();
  } catch (error) {
    next(error);
  }
});

5. 完善Nodemailer配置 #

明确指定MailHog连接的非SSL属性，避免潜在连接问题：

const transporter = nodemailer.createTransport({
  host: 'localhost',
  port: 1025,
  secure: false // 适配MailHog非SSL端口
});

6. 测试验证流程 #

1. 启动MailHog服务（确保运行在localhost:1025）
2. 启动后端：node server.js，确认终端输出Server started on port 3000
3. 访问http://localhost:3000，填写表单后点击发送
4. 查看浏览器控制台，确认表单数据日志；查看终端，确认POST请求和邮件发送日志
5. 访问MailHog Web界面（默认http://localhost:8025），检查收件箱是否收到邮件

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