如何避免Axios请求404时在浏览器控制台记录错误日志？

我通过RESTful API根据邮箱地址加载用户信息，当用户不存在时会收到“404 - Not found”响应，这属于应用的预设正常状态，此时我会返回null。但该请求始终会在浏览器控制台中被标记为错误，请问是否有办法阻止这种非错误请求被记录？

原代码示例：

export async function getUserByEmail(email: string): Promise<User | null> {
    let result: User | null = null;

    axios.get(config.api.url + "/user/email/" + email)
        .then(res => res.data())
        .then((data) => {
            result = User.fromJson(data);
        })
        .catch((error) => {
            if (error.response.status !== 404) {
                throw new ApiError(error.response.status, error.message);
            }
        })

    return result;
}

首先要明确：浏览器控制台/Network面板的404标记分两种情况，处理方式不同：

1. Network面板的请求标红 #

这是浏览器基于HTTP状态码的默认行为——4xx属于客户端错误类状态码，浏览器会自动将这类请求标记为红色。这种标记无法通过前端代码消除，因为它是浏览器对HTTP响应的标准反馈。

2. Console面板的错误日志 #

如果是Console中出现未捕获的错误日志，可以通过Axios配置避免，同时还需修正原代码中的异步逻辑bug：

修正异步逻辑+配置Axios忽略404错误 #

原代码的核心问题是没有等待Axios请求完成就返回result，导致无论请求成功与否都会直接返回null。同时，Axios默认会将4xx状态码视为错误并进入catch，可以通过validateStatus配置让404被视为成功响应：

export async function getUserByEmail(email: string): Promise<User | null> {
  try {
    // 配置validateStatus，指定哪些状态码视为成功
    const response = await axios.get(`${config.api.url}/user/email/${email}`, {
      validateStatus: (status) => status === 200 || status === 404
    });

    if (response.status === 200) {
      // 用户存在，解析数据返回
      return User.fromJson(response.data);
    } else {
      // 404，用户不存在，返回null
      return null;
    }
  } catch (error) {
    // 仅处理非200/404的异常情况
    const axiosError = error as { response: { status: number; message: string } };
    throw new ApiError(axiosError.response.status, axiosError.message);
  }
}

后端调整方案（推荐） #

如果可以修改后端接口，更合理的做法是将“用户不存在”的场景返回200状态码，在响应体中明确业务状态，比如：

• 用户存在时返回：

  {
    "exists": true,
    "user": { /* 用户数据 */ }
  }
  

• 用户不存在时返回：

  {
    "exists": false,
    "user": null
  }
  

这种方式完全符合HTTP语义（请求本身成功完成，只是业务结果为“不存在”），浏览器不会标记任何错误，前端处理也更直观。

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