MERN栈Tinder克隆项目后端错误及用户数据为空问题排查

一、后端ERR_HTTP_HEADERS_SENT错误原因及修复 #

这个错误的核心原因是同一个请求中多次发送响应，具体出现在/login接口：

原代码片段：

if (user && correctPassword) {
    const token= jwt.sign(user ,email, { expiresIn : 60*24 })
    res.status(201).json({token , userId: user.user_id})  
}
res.status(400).send('Invalide Credentials')

当user && correctPassword条件成立时，代码会发送一次响应，但后续仍会执行到res.status(400).send(...)再次发送响应，触发报错。

修复方案 #

在条件分支中添加return终止后续代码执行，同时修正拼写错误并处理用户不存在的情况：

app.post ('/login', async (req, res) => { 
    const client = new MongoClient(uri)
    const { email, password}= req.body
    
    try{
        await client.connect()
        const database = client.db('tinderdb')
        const users = database.collection('users')

        const user = await users.findOne({ email })
        // 先判断用户是否存在
        if (!user) {
            return res.status(400).send('Invalid Credentials')
        }
        const correctPassword = await bcrypt.compare(password , user.hashed_password)

        if (correctPassword) {
            const token= jwt.sign(user ,email, {
                expiresIn : 60*24
            })
          return res.status(201).json({token , userId: user.user_id})  
        }
        res.status(400).send('Invalid Credentials')
        
    }catch(err){
        console.log(err)
        res.status(500).send('服务器内部错误')
    }finally{
        await client.close()
    }
})

二、前端user输出null的问题排查 #

1. Cookie键名不匹配 #

前端代码中获取cookies.UserId，但后端登录/注册接口返回的键名是userId（小写u），需确保键名一致：

// 修正Cookie键名，和后端返回的字段匹配
const userId = cookies.userId

2. 异步请求时序问题 #

console.log('user', user)在组件初始化时立即执行，此时getUser异步请求尚未完成，所以输出null。可调整日志位置，监听user状态变化：

useEffect(() => {
    console.log('user', user) // 仅当user更新时打印
}, [user])

3. 请求参数与后端接口异常处理 #

• 前端检查userId是否有效：

  const getUser = async () => {
      console.log('当前用户ID:', userId) // 确认是否有值
      try {
          const response = await axios.get('http://localhost:8000/user', {
              params: {userId}
          })
          setUser(response.data)
      } catch (error) {
          console.log(error)
      }
  }
  

• 后端/user接口添加错误捕获，避免无响应：

  app.get('/user', async (req,res) => {
      const client = new MongoClient(uri)
      const userId = req.query.userId
  
      try{
          await client.connect()
          const database = client.db('tinderdb')
          const users = database.collection('users')
          const query = {user_id:userId}
  
          console.log('query',query)
          const user = await users.findOne(query)
          res.send(user)
      } catch(err) {
          console.log(err)
          res.status(500).send('服务器内部错误')
      } finally{
          await client.close()
      }
  })
  

三、额外优化建议 #

• 后端复用MongoDB客户端连接，避免每次请求创建新连接，提升性能。
• JWT签名使用独立密钥而非用户邮箱，增强安全性：

  // 可通过环境变量配置密钥
  const token = jwt.sign(insertedUser, process.env.JWT_SECRET, { expiresIn: 60 * 20 })
  

内容的提问来源于stack exchange，提问作者ZENATI Mohammed el-amine