本文详解前端 fetch 发起登录请求时出现 400 错误的典型原因，重点指出前后端字段名不一致、表单提交机制冲突及事件处理误用等关键问题，并提供可立即生效的修复方案与最佳实践。
本文详解前端 fetch 发起登录请求时出现 400 错误的典型原因，重点指出前后端字段名不一致、表单提交机制冲突及事件处理误用等关键问题，并提供可立即生效的修复方案与最佳实践。
在使用 express + Sequelize 构建用户认证系统时，前端通过 fetch 向 /api/users/login 发起 POST 请求却持续收到 400 Bad Request 响应，是一个高频且易被忽视的集成问题。表面上看，控制台能正确打印用户名和密码，网络面板显示请求已发出，但服务端始终拒绝处理——这往往并非路由路径错误，而是请求负载（payload）与后端期望不匹配，或表单默认行为干扰了异步逻辑。
? 根本原因分析
观察你提供的代码，存在两个关键不一致：
-
字段名不匹配：
前端 fetch 中发送的是：body: jsON.stringify({ username, userPassword })而后端 userRoutes.js 中却尝试读取：
const validPassword = await userData.checkPassword(req.body.password); // ← 这里是 `password`，不是 `userPassword`同时，查询用户时使用 req.body.username 是正确的，但密码校验时却访问了不存在的 req.body.password 字段 → req.body.password 为 undefined → checkPassword(undefined) 极可能抛出错误或直接返回 false，触发 400 响应。
-
表单提交与事件处理冲突：
当前 HTML 表单使用
✅ 正确修复方案（推荐组合）
✅ 方案一：修正字段名 + 保留 submit 事件（推荐）
这是最符合语义化与可维护性的做法：
// login.js —— 保持 form submit 绑定，但确保字段名一致 const loginFormHandler = async (e) => { e.preventDefault(); // ✅ 必须保留！阻止原生提交 const username = document.getElementById('inputUsername').value.trim(); const password = document.getElementById('inputPassword').value.trim(); // ← 改为 `password` if (username && password) { try { const res = await fetch('/api/users/login', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ username, password }) // ← 字段名与后端完全一致 }); if (res.ok) { document.location.replace('/profile'); } else { const data = await res.json(); console.Error('Login failed:', data.message); } } catch (err) { console.error('Network error:', err); } } }; // 绑定到 form 的 submit 事件（HTML 不变） document.querySelector('.loginFormHandler').addEventListener('submit', loginFormHandler);// userRoutes.js —— 确保读取 `password` 字段 router.post('/login', async (req, res) => { try { const { username, password } = req.body; // ✅ 解构更清晰 const userData = await User.findOne({ where: { username } }); if (!userData) { return res.status(400).json({ message: 'Incorrect username or password' }); } const validPassword = await userData.checkPassword(password); // ✅ 使用 `password` if (!validPassword) { return res.status(400).json({ message: 'Incorrect username or password' }); } req.session.save(() => { req.session.user_id = userData.id; req.session.logged_in = true; res.json({ user: userData, message: 'You are now logged in!' }); }); } catch (err) { console.error(err); res.status(500).json({ message: 'Server error' }); } });⚠️ 方案二：改用 button click（仅作备选，不推荐）
如原文答案所提，改为 type=”button” 并绑定 onclick，虽可绕过表单提交干扰，但牺牲了可访问性（如回车提交失效）和语义化，且未解决字段名问题：
<!-- login.handlebars --> <button id="login-btn" type="button" class="btn btn-secondary btn-sm" onclick="loginFormHandler()"> Submit </button>⚠️ 注意：此时必须移除 e.preventDefault() —— 因为它已无对应 submit 事件；但仍需修复字段名不一致问题，否则 400 依然存在。
? 关键注意事项
- 永远验证 req.body 结构：在路由开头添加日志：
console.log('Received body:', req.body); // 确认字段名和值 - 检查中间件顺序：确保 app.use(express.json()) 和 app.use(express.urlencoded({ extended: true })) 在路由定义之前注册。
- 避免裸 res.status(400).json(err)：err 可能是 Error 对象，直接序列化会导致空响应或 500。应明确处理：
res.status(400).json({ message: err.message || 'Invalid request' }); - 前端错误处理增强：fetch 不会因 http 状态码拒绝 promise，务必显式检查 res.ok 或 res.status。
✅ 总结
400 Bad Request 在登录流程中几乎从不源于“路径错误”，而多由 字段命名不一致（如 userPassword vs password）、表单默认行为未拦截 或 请求头/数据格式不匹配 引起。修复核心在于：前后端字段严格统一 + 正确阻止原生提交 + 完善错误捕获。采用方案一（e.preventDefault() + 语义化表单提交）既是标准实践，也最利于长期维护。