React+Node.js+MongoDB密码重置时404 Not Found问题求助

核心问题与修复步骤 #

1. 前端请求URL错误导致404

前端fetch请求的URL写死了路由占位符/resetPassword/:token2，既没有替换成实际的token2值，也与后端的POST路由不匹配（后端POST路由为/newpassword/:token2，/resetPassword/:token2对应的是PATCH方法）。

修改Newpassword组件的请求代码：

// 原错误代码
const res = await fetch(`/resetPassword/:token2`, {
  method: "POST",
  headers: {
    "Content-Type": "application/json",
  },
  body: JSON.stringify({ hashedPassword }),
});

// 修改后代码
const res = await fetch(`/newpassword/${token2}`, {
  method: "POST",
  headers: {
    "Content-Type": "application/json",
  },
  body: JSON.stringify({ password }),
});

2. 请求参数与后端预期不匹配

前端提前对密码进行哈希并以hashedPassword字段传递，但后端控制器期望接收password字段，且后端会自行处理密码哈希逻辑，前端提前哈希会导致密码重复加密。

移除前端的密码哈希步骤，直接传递原始密码：

// 移除这行代码
// const hashedPassword = bcryptjs.hashSync(password, 10);

// 请求体改为传递password字段
body: JSON.stringify({ password }),

3. 后端控制器的两处逻辑错误

• 生成登录令牌时错误使用了模型User而非查询到的用户实例user，导致令牌无效
• user.save()未添加await，可能出现数据库未完成更新就返回响应的情况

修改认证控制器的resetPassword函数：

// 原错误代码
user.save();
const logintokeen = signToken(User._id);

// 修改后代码
await user.save();
const logintokeen = signToken(user._id);

4. 冗余路由清理（可选优化）

后端同时定义了/resetPassword/:token2（PATCH方法）和/newpassword/:token2（POST方法）指向同一个控制器，容易造成混淆，建议保留其中一组路由即可。

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