跳到主要内容

常用 HTTP 状态码速查

HTTP 状态码是服务器对请求处理结果的“标准回复”。

前端开发里，你几乎每天都会看到它们：

  • 请求成功了吗？
  • 是我参数写错了，还是服务端挂了？
  • 要不要提示用户重试、登录、或者联系管理员？

这篇文档会用通俗方式讲清楚常用状态码，并结合前端场景给出处理建议。

一、先记住总分类​

HTTP 状态码是三位数字，按首位分为 5 大类：

范围含义你可以理解成
1xx信息性状态“收到请求了，继续”
2xx成功“处理成功”
3xx重定向“资源位置变了，去别处”
4xx客户端错误“你的请求有问题”
5xx服务端错误“服务器出问题了”

二、最常用的状态码（前端高频）​

下面这些是前端项目中最常见、最值得重点掌握的。

200 OK​

含义：请求成功，服务器返回了你需要的数据。

常见场景：

  • GET /api/user/profile 成功返回用户信息
  • POST /api/login 登录成功
HTTP/1.1 200 OK
Content-Type: application/json

{"id": 1, "name": "Alice"}

201 Created​

含义：请求成功，并且服务器新建了资源。

常见场景：

  • 创建文章
  • 新增评论
  • 新建订单
HTTP/1.1 201 Created
Location: /api/posts/101

提示：201 往往搭配 Location 头部，告诉你新资源地址。

204 No Content​

含义：请求成功，但响应体为空。

常见场景：

  • 删除成功（DELETE）
  • 更新成功但不返回详情
HTTP/1.1 204 No Content

前端注意：204 不要再调用 response.json()，否则可能报错。

301 Moved Permanently / 302 Found / 307 Temporary Redirect / 308 Permanent Redirect​

含义：资源被重定向。

  • 301 / 308：永久重定向
  • 302 / 307：临时重定向

常见场景：

  • http:// 自动跳到 https://
  • 旧接口地址跳到新地址
HTTP/1.1 301 Moved Permanently
Location: https://example.com/new-path

304 Not Modified​

含义：资源没有变化，可以继续使用缓存。

常见场景：

  • 浏览器缓存命中（配合 ETag / If-None-Match）

价值：减少流量和加载时间。

400 Bad Request​

含义：请求格式或参数有误。

常见场景：

  • JSON 格式错误
  • 参数类型不对
  • 必填字段缺失
{
  "message": "邮箱格式不正确"
}

401 Unauthorized​

含义：未认证（通常是未登录或 token 无效）。

常见场景：

  • token 过期
  • 请求没带 Authorization

前端常见处理：

  1. 清理本地登录态
  2. 跳转登录页
  3. 登录后回跳原页面

403 Forbidden​

含义：已认证，但无权限。

常见场景：

  • 普通用户访问管理员接口
  • 账号被封禁

区分记忆：401 是“你还没证明你是谁”，403 是“我知道你是谁，但你不能做这件事”。

404 Not Found​

含义：资源不存在。

常见场景：

  • 接口路径写错
  • 请求的文章/商品已被删除
  • 前端路由未匹配

409 Conflict​

含义：请求与当前资源状态冲突。

常见场景：

  • 用户名已存在
  • 并发更新冲突（版本号不一致）

422 Unprocessable Content​

含义：请求格式正确，但业务校验失败。

常见场景：

  • 表单字段不满足规则（密码太短、日期范围不合法）

和 400 的区别：400 更偏“格式层面错误”，422 更偏“业务规则不通过”。

429 Too Many Requests​

含义：请求太频繁，被限流。

常见场景：

  • 短时间重复发送验证码
  • 爬虫/突发流量超限
HTTP/1.1 429 Too Many Requests
Retry-After: 60

前端可做：

  • 禁用按钮倒计时
  • 读取 Retry-After 后再重试

500 Internal Server Error​

含义：服务器内部错误（通用兜底）。

常见场景：

  • 代码异常
  • 未捕获错误

502 Bad Gateway / 503 Service Unavailable / 504 Gateway Timeout​

这些常见于网关、反向代理、微服务架构：

  • 502：上游服务返回异常
  • 503：服务暂时不可用（维护/过载）
  • 504：网关等待上游响应超时

前端建议统一提示：

  • “服务繁忙，请稍后重试”
  • 配合重试机制（避免无限重试）

三、前端错误处理实战流程​

四、Fetch/Axios 代码示例​

Fetch 示例​

async function requestUserProfile() {
  const res = await fetch('/api/user/profile', {
    headers: {
      Authorization: `Bearer ${localStorage.getItem('token') ?? ''}`,
    },
  });

  if (res.status === 401) {
    localStorage.removeItem('token');
    window.location.href = '/login?redirect=/profile';
    return;
  }

  if (res.status === 403) {
    throw new Error('无权限访问该资源');
  }

  if (res.status === 404) {
    return null;
  }

  if (!res.ok) {
    throw new Error(`请求失败，状态码：${res.status}`);
  }

  return res.json();
}

Axios 响应拦截器示例​

import axios from 'axios';

const http = axios.create({
  baseURL: '/api',
  timeout: 10000,
});

http.interceptors.response.use(
  (response) => response,
  (error) => {
    const status = error?.response?.status;

    if (status === 401) {
      localStorage.removeItem('token');
      window.location.href = '/login';
    } else if (status === 403) {
      console.error('没有权限');
    } else if (status >= 500) {
      console.error('服务器异常，请稍后重试');
    }

    return Promise.reject(error);
  },
);

五、面试高频问答​

Q1：401 和 403 的区别是什么？​

  • 401：未认证，通常需要登录
  • 403：已认证但无权限

Q2：为什么删除接口常返回 204？​

删除成功后通常不需要返回额外数据，用 204 可以减少响应体开销。

Q3：304 是错误吗？​

不是。304 是缓存协商成功的表现，说明资源未变更，属于性能优化的一部分。

Q4：500、502、503、504 应该如何区分？​

  • 500：应用自身异常
  • 502：网关拿到上游无效响应
  • 503：服务临时不可用
  • 504：网关等待上游超时

六、快速记忆表​

状态码含义前端处理建议
200成功正常渲染
201创建成功可跳转到新资源
204成功无响应体不要解析 JSON
301/302/307/308重定向跟随 Location
304缓存可用使用本地缓存
400请求有误提示用户修正输入
401未认证跳转登录
403无权限展示权限不足
404资源不存在空状态/404 页面
409资源冲突提示冲突并刷新数据
422业务校验失败展示字段级错误
429请求过多延迟重试
500服务器错误通用错误提示
502/503/504网关/服务异常友好提示 + 重试策略

延伸阅读​