接口返回422状态时控制台无法显示自定义错误消息解决方法

使用MongoDB搭建用户注册页面，正在开发重复注册校验逻辑，当前后端校验代码如下：

const existingUser = await db.collection('users').findOne({ email: email });

if (existingUser) {
  res.status(422).json({ message: 'User already exists !' });
  client.close();
  return;
}

触发重复用户拦截逻辑时，浏览器控制台仅输出默认报错：POST http://localhost:3000/api/auth/signup 422 (Unprocessable Entity)，未展示后端自定义返回的User already exists !提示文本。

控制台默认打印的422错误是浏览器对非2xx状态码HTTP请求的默认日志输出，不会自动读取接口响应体里的自定义内容，需要前端在请求逻辑里主动解析响应、提取返回的提示信息。

根据前端使用的请求库，对应修改请求逻辑即可：

• 若使用原生fetch
  fetch默认不会将非2xx状态码判定为请求失败，需要手动判断响应状态后解析响应体：

  // 注册请求示例
  const res = await fetch('http://localhost:3000/api/auth/signup', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ /* 注册参数：email、password等 */ })
  })
  const resData = await res.json()
  
  if (!res.ok) {
    // 这里即可拿到后端返回的自定义提示
    console.log(resData.message) // 输出：User already exists !
    // 也可以将提示渲染到页面上告知用户
    return
  }
  // 下方写注册成功的业务逻辑
  

• 若使用axios
  axios默认会将非2xx状态码的请求抛入catch分支，需要从错误对象的response字段中取响应内容：

  axios.post('http://localhost:3000/api/auth/signup', {
    /* 注册参数：email、password等 */
  }).then(res => {
    // 注册成功的业务逻辑
  }).catch(err => {
    if (err.response?.data?.message) {
      console.log(err.response.data.message) // 输出：User already exists !
      // 也可以将提示渲染到页面上告知用户
    }
  })
  

当前后端代码中在接口逻辑内调用client.close()关闭数据库连接的写法存在问题，会导致后续接口请求无法正常复用数据库连接，建议将MongoDB连接初始化在服务启动阶段做全局复用，不要在单次接口处理逻辑中关闭连接。

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