Node.js后端调用res.json返回数据后，前端如何正确接收？

• HTTP请求的响应是一一对应的，你通过POST请求调用登录接口返回的JSON数据，只会存在于本次POST请求的响应体中。HTTP本身是无状态协议，你后续单独发起GET请求到同一个接口，既不可能拿到前一次POST请求的返回数据，且你的后端没有定义该接口的GET方法处理逻辑，自然返回404错误。
• 前端代码逻辑冗余错误，不需要重复发起请求，直接取本次POST请求的返回值即可。
• 后端逻辑存在缺口：密码校验不匹配时没有给前端返回响应，会导致前端请求超时挂起。

前端代码修复（直接取POST请求响应数据） #

如果你的自定义POST方法已经封装了fetch逻辑，直接取它的返回值即可：

const login = async (e) => {
  e.preventDefault();
  // 直接接收POST方法返回的响应数据
  const res = await POST(ENDPOINTS.USER_LOGIN, userLogin);
  // 若POST方法未封装JSON解析，加这行：const data = await res.json()
  console.log(data);
  // 存入localStorage
  localStorage.setItem('user_id', data.user_id);
  localStorage.setItem('token', data.token);
};

如果不想用封装的POST方法，也可以直接用fetch发请求：

const login = async (e) => {
  e.preventDefault();
  const response = await fetch("http://localhost:4200/api/auth/login", {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json'
    },
    body: JSON.stringify(userLogin)
  });
  const data = await response.json();
  console.log(data);
  // 存入localStorage
  localStorage.setItem('user_id', data.user_id);
  localStorage.setItem('token', data.token);
};

后端逻辑补全 #

在密码不匹配的分支补上返回响应，避免前端超时：

// 原有逻辑
else {
  console.log("not match");
  // 新增返回
  return res.status(401).json({ err: "邮箱或密码错误" });
}

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