Node.js表单提交异常问题求助

1. 确认前端提交事件是否触发 #

在表单提交事件处理函数开头添加日志，验证是否进入了处理逻辑：

form.addEventListener('submit', (event) => {
  console.log('提交事件触发'); // 添加这行日志
  event.preventDefault();
  // 剩余原有代码...
});

如果控制台看不到这条日志，说明事件监听未生效，检查：

• JS代码是否在DOM加载完成后执行（比如放在</body>标签前，或者包裹在DOMContentLoaded事件中）
• 页面中是否存在多个id="form"的元素，确保表单ID唯一

2. 修复前端fetch的错误处理逻辑 #

fetch仅在网络完全中断时才会进入catch，HTTP错误（如404、500状态码）不会触发catch。当前代码直接解析response.json()，若后端返回非200状态码，可能导致解析失败或无法识别错误，修改如下：

fetch('/', {
  method: 'POST',
  body: formData
})
.then(response => {
  if (!response.ok) {
    // 捕获HTTP错误，抛出后进入catch分支
    throw new Error(`请求失败，状态码：${response.status}`);
  }
  return response.json();
})
.then(data => {
  // 原有成功逻辑...
})
.catch(error => {
  console.error('提交错误详情：', error); // 添加错误详情日志
  spinner.style.display = 'none';
  formMessage.style.display = 'block';
  formMessage.textContent = 'Error al enviar el formulario.';
});

添加console.error后，可在控制台看到具体错误原因，帮助快速定位问题。

3. 后端适配FormData请求类型 #

前端使用FormData提交的请求，Content-Type为multipart/form-data，而当前后端仅配置了body-parser处理application/x-www-form-urlencoded和application/json，无法解析multipart/form-data，导致req.body为空，后续处理报错。

解决方法：使用multer中间件处理multipart/form-data请求：

1. 安装multer：

npm install multer

2. 修改后端代码：

const multer = require('multer');
const upload = multer(); // 不保存文件，仅解析表单数据

// 替换原bodyParser.urlencoded配置
// app.use(bodyParser.urlencoded({ extended: true }));
app.use(upload.none()); // 解析非文件类型的FormData字段

修改后后端就能正确获取req.body中的表单数据。

4. 检查共享主机的缓存与代理配置 #

• 按Ctrl+Shift+R强制刷新浏览器，清除缓存，避免加载旧版JS文件
• 确认共享主机的反向代理是否正确转发POST请求到Node.js应用端口（技术支持能成功提交，大概率代理配置正常，但可再次确认）

5. 后端邮件发送配置验证 #

当前nodemailer配置的端口为995（通常是POP3s端口），SMTP服务一般使用465（SSL）或587（TLS）端口，尝试修改端口并测试：

const transporter = nodemailer.createTransport({
  host: 'hydra.vivawebhost.com',
  port: 465, // 替换为465或587
  secure: true, // 端口为465时设为true，587时设为false
  auth: {
    user: 'info@calverasparts.com',
    pass: 'Diplodocus1986!'
  }
});

同时在后端app.post('/')开头添加日志，验证是否接收到表单数据：

app.post('/', (req, res) => {
  console.log('接收到的表单数据：', req.body); // 添加日志
  // 剩余原有代码...
});

查看服务器日志，确认req.body是否有值。

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