React+Node.js聊天应用登录注册触发404错误求排查

问题核心 #

你遇到的404错误源于前端请求的API路径与后端定义的路由完全不匹配，同时存在一些细节问题导致请求无法被正确处理。

具体错误点与修复步骤 #

1. 请求路径不匹配（最关键）

前端代码中，请求路径使用了带空格和大写的字符串：

await axios.post(`${URL}/${isSignup ? 'Sign Up ' : 'Sign In'}`, { ... })

但后端路由定义的是全小写、无空格的路径：

router.post('/signup', signup);
router.post('/login', login);

修复：将前端路径改为与后端一致的小写格式，同时去掉多余空格：

// 修改后的请求代码
const {data :  { token ,userId , hashedPassword , fullName }} = await axios.post(`${URL}/${isSignup ? 'signup' : 'login'}`,{
  username , password , fullName: form.fullName , phoneNumber,
})

另外，前端传了avatarURL但后端signup函数未处理该参数，可选择在后端添加处理逻辑，或前端去掉这个多余参数（上述代码已移除avatarURL）。

2. Cookie键名包含多余空格

前端设置Cookie时，部分键名末尾带有空格：

cookies.set('token ' , token ) // 'token '带空格
cookies.set('username ' , username ) // 同样带空格

这会导致后续读取Cookie时无法找到对应值，修复：去掉所有键名的空格：

cookies.set('token', token )
cookies.set('username', username )
cookies.set('fullName', fullName)
cookies.set('userId', userId )

if (isSignup){
  cookies.set('phoneNumber', phoneNumber )
  cookies.set('avatarURL', avatarURL)
  cookies.set('hashedPassword', hashedPassword )
}

3. 额外优化建议

• 注册密码校验：前端注册时未校验password与confirmPassword是否一致，建议在handleSubmit中添加校验逻辑，避免无效请求：

  if (isSignup && form.password !== form.confirmPassword) {
    alert('密码与确认密码不一致');
    return;
  }
  

• 用户查询字段一致性：后端login函数用{ name: username }查询用户，但注册时传递的是username字段，需确认Stream Chat中用户的存储字段名是否为name，若为username则修改查询条件：

  const { users } = await client.queryUsers({ username: username });
  

总结 #

优先修复请求路径和Cookie键名的问题，这是导致404及后续功能异常的核心原因；再根据实际情况补充密码校验和用户查询字段的调整，即可解决当前登录/注册问题。

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