前端必须懂！HTTP 状态码到底是哪里来的？怎么用？

前端必须懂！HTTP 状态码到底是哪里来的？怎么用？

🌐 前端开发中你是否遇到过这些情况？

• 明明接口写对了，却返回 404 Not Found？
• 登录后访问接口被拦下，提示 401 Unauthorized？
• 页面一直白屏，F12 一看原来是 500 Server Error？

别慌！这一切的背后，藏着一个你必须掌握的知识点：HTTP 状态码。

本文将彻底解答两个关键问题：

🧠 它到底是怎么来的？
🛠️ 前端到底怎么用它、如何处理它？

---

一、📦 HTTP 状态码是从哪来的？

HTTP 状态码是服务器返回的请求处理结果的编号，并不是前端生成的。

🧩 一个 HTTP 请求完整流程：

浏览器/前端发出请求
        ↓
服务器接收到请求 → 处理逻辑 → 返回结果
        ↓
前端拿到结果状态码 + 数据

举个真实例子，浏览器发起 /api/user 请求，服务器返回：

HTTP/1.1 200 OK
Content-Type: application/json

{
  "username": "小明",
  "age": 18
}

• 200 OK：就是 HTTP 状态码，表示请求成功
• 它位于响应头中（不是 body）
• 前端通过 response.status 读取它的值

---

二、📊 HTTP 状态码五大类，一句话记住！

分类	范围	关键词	含义
1xx	100–199	继续	请求处理中（很少见）
2xx	200–299	成功	请求处理完成
3xx	300–399	重定向	资源地址发生变化
4xx	400–499	你错了	客户端请求有误
5xx	500–599	我炸了	服务端处理失败

📌 口诀：继续走、搞定了、跳一下、你错了、我炸了

---

三、✅ 2xx：请求成功类状态码（前端最常见）

状态码	含义	实际场景
200 OK	请求成功	获取用户信息、文章列表
201 Created	创建成功	提交表单、新增资源
204 No Content	成功但无内容	删除成功，不需要返回体

实战示例：

axios.post('/api/article', data).then(res => {
  if (res.status === 201) {
    alert('发布成功');
  }
});

---

四、🔁 3xx：重定向类状态码（你访问的资源搬家了）

状态码	含义	场景
301 Moved Permanently	永久重定向	网站改域名，旧地址不再使用
302 Found	临时重定向	登录后跳转首页
303 See Other	用 GET 方式跳转其他页面	表单提交后跳转到结果页
304 Not Modified	本地缓存可用	浏览器资源未变，走缓存
307 Temporary Redirect	临时重定向，方法不变	API 服务降级临时跳转

实战说明：

• 大部分 3xx 浏览器自动处理，前端感知不到
• 但 304 是浏览器缓存优化的关键，能显著提高加载性能

🔧 如何触发 304？

如果你开启了资源缓存，例如：

Cache-Control: max-age=3600
ETag: "v1.0.0"

下一次请求资源时，浏览器会自动判断是否修改，如果没变，就返回：

304 Not Modified

此时资源走缓存，页面秒开不是梦！

---

五、❌ 4xx：客户端错误类状态码（你这边请求错了）

状态码	含义	场景
400 Bad Request	请求参数有误	JSON 拼错、缺字段
401 Unauthorized	未授权访问	没登录或 token 失效
403 Forbidden	权限不足	用户不是管理员
404 Not Found	资源不存在	接口或页面地址写错了
405 Method Not Allowed	请求方式不支持	用 GET 调了只能 POST 的接口

实战处理：

axios.get('/api/userinfo').catch(err => {
  const status = err.response.status;
  if (status === 401) {
    alert('请先登录');
    router.push('/login');
  } else if (status === 404) {
    alert('接口地址错误');
  }
});

---

六、💥 5xx：服务器错误类状态码（不是你的错，但你要兜底）

状态码	含义	场景
500 Internal Server Error	后端异常	逻辑崩溃、代码报错
502 Bad Gateway	网关错误	Nginx 代理失败
503 Service Unavailable	服务暂时不可用	系统维护、限流中
504 Gateway Timeout	网关超时	接口处理太慢，超时了

前端建议：

• 不要直接崩页面！
• 应该提示用户：服务器异常，请稍后重试
• 并记录日志方便后续排查（埋点系统）

---

七、🛠️ 前端实战：如何使用状态码写出稳健代码？

1. 利用 axios 拦截器统一处理状态码

axios.interceptors.response.use(
  res => res,
  err => {
    const status = err.response?.status;
    switch (status) {
      case 401:
        router.push('/login');
        break;
      case 403:
        alert('无权限访问');
        break;
      case 500:
        alert('服务器错误');
        break;
    }
    return Promise.reject(err);
  }
);

2. 使用浏览器 Network 面板快速调试

• F12 → Network → 找到对应请求 → 看 Status 列
• 配合 Preview / Response / Headers 找具体原因

---

八、📌 状态码速查表（建议收藏）

类型	状态码	含义
✅ 成功	200	OK，最常见
✅ 成功	201	创建成功
✅ 成功	204	删除成功，无返回
🔁 跳转	301	永久跳转
🔁 跳转	302	临时跳转
🔁 跳转	304	浏览器缓存
❌ 错误	400	请求错误
❌ 错误	401	未登录
❌ 错误	403	无权限
❌ 错误	404	资源不存在
💥 异常	500	服务器炸了
💥 异常	502	网关故障
💥 异常	503	服务挂了
💥 异常	504	响应超时

---

九、⚠️ 常见误区别再踩了！

错误理解	正确认知
“404 是服务器出错”	❌ 是你请求地址错了
“401 和 403 差不多”	❌ 401 是没登录，403 是没权限
“状态码错误前端处理不了”	✅ 应该兜底处理，防止白屏
“只处理 200 就够了”	❌ 所有可能返回的状态码都应该处理

---

🔚 总结：HTTP 状态码是前端调试的方向盘！

• 它来自服务端，是请求的处理反馈
• 是前后端沟通的桥梁，前端必须理解和善用
• 掌握它，就能让你在调试、性能优化、异常处理中游刃有余