MERN项目如何将Node端登录校验结果返回给React前端Login组件

你现有代码存在两个核心问题导致无法传递数据到前端：

1. 用了GET接口却尝试读取请求体：HTTP协议中GET请求默认不会携带请求体，Express也不会默认解析GET请求的body参数，你拿到的request.body大概率是undefined，这也是你之前测试异常的原因之一，登录请求应该用POST方法。
2. 没有给前端返回响应：你查询到information之后只做了控制台打印，没有调用Express响应对象的返回方法，前端发起请求后会一直处于等待响应的状态，自然拿不到数据。

第一步：修改后端接口代码 #

首先确保你的Express服务已经注册了JSON解析中间件，否则无法读取请求体里的JSON格式参数，完整接口代码如下：

// 注册JSON解析中间件，必须写在接口定义前
application.use(express.json())

// 将接口改为POST方法
application.post('/check', async (request, response) => {
  try {
    const information = await db.collection('data').findOne({
      name: request.body.username,
      password: request.body.password,
    });
    console.log(information);
    // 核心逻辑：用response.json将查询结果写入响应体返回给前端
    if (information) {
      // 查到匹配用户，返回成功状态和需要的用户信息
      response.json({
        code: 200,
        msg: '登录成功',
        userInfo: {
          id: information._id,
          username: information.name
        }
      })
    } else {
      // 没有匹配用户，返回登录失败提示
      response.json({
        code: 400,
        msg: '用户名或密码错误'
      })
    }
  } catch (err) {
    // 捕获数据库查询异常，返回错误信息
    response.status(500).json({
      code: 500,
      msg: '服务器异常'
    })
  }
});

第二步：前端Login组件接收数据 #

在Login组件的登录提交逻辑里，用fetch或者axios发起POST请求，读取后端返回的响应数据即可，原生fetch示例如下：

// Login组件内的提交登录函数
const handleLogin = async (usernameInput, passwordInput) => {
  try {
    const res = await fetch('http://你的后端服务地址/check', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json'
      },
      // 把用户输入的账号密码放到请求体里
      body: JSON.stringify({
        username: usernameInput,
        password: passwordInput
      })
    })
    const result = await res.json()
    // 处理返回结果
    if (result.code === 200) {
      alert(result.msg)
      // 把用户信息存到localStorage，后续点赞帖子等操作可以直接取用
      localStorage.setItem('userInfo', JSON.stringify(result.userInfo))
      // 后续可以加跳转页面的逻辑
    } else {
      alert(result.msg)
    }
  } catch (err) {
    console.error('登录请求失败', err)
  }
}

注意事项 #

以上是最基础的前后端数据传递逻辑，核心就是后端通过response.json()把数据写入响应体，前端发起请求后读取响应体内容即可，没有用到任何额外的鉴权方案，符合你先搞懂基础逻辑的需求。
该实现仅用于学习基础逻辑，生产环境使用存在严重安全风险：密码明文传输、明文存储在数据库、没有鉴权凭证很容易被伪造请求，后续你可以再学习JWT、Cookie加密等方案优化。

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