前端常见 HTTP 状态码

作为前端开发者，与后端 API 交互时，HTTP 状态码是判断请求成败的关键信号。理解常见状态码的含义、责任归属及应对策略，能极大提升调试效率和团队协作。以下是关键状态码的详细解析：

首先说一下如何查看状态码：
如上图
项目运行之后，打开浏览器开发者工具（F12），查看 Network 面板查看状态码

一、常见状态码分类

二、关键状态码与处理方案

200 OK

• 含义：请求成功，响应包含预期数据。
• 责任：后端（返回正确数据）。
• 前端处理：正常处理响应数据。

304 Not Modified

• 含义：资源未修改，可使用本地缓存。
• 责任：前端（缓存策略生效）。
• 前端处理：直接使用本地缓存资源，无需额外请求。

400 Bad Request

• 含义：客户端请求错误（参数缺失、格式错误等）。
• 责任排查：
  • 前端：检查请求参数、格式（JSON/FormData）、请求头（如 Content-Type）。
  • 后端：验证逻辑过于严格或错误。
• 处理步骤：
  1. 打开浏览器开发者工具（F12），查看 Network 面板中的请求负载（Payload）。
  2. 比对 API 文档，确认参数名称、类型、是否必填。
  3. 使用 JSON.stringify() 或 console.log 打印请求数据，确保格式正确。
  4. 与后端确认接口校验规则。

401 Unauthorized

• 含义：未认证或认证失效（如 Token 过期）。
• 责任排查：
  • 前端：未发送 Token、Token 格式错误、Token 过期未刷新。
  • 后端：Token 验证逻辑错误。
• 处理步骤：
  1. 检查请求头是否包含 Authorization: Bearer <token>。
  2. 验证 Token 是否过期（前端可解码 JWT 检查 exp 字段）。
  3. 实现 Token 自动刷新逻辑，或在 401 时跳转登录页。

403 Forbidden

• 含义：已认证但权限不足。
• 责任排查：
  • 前端：请求了当前用户无权访问的资源。
  • 后端：权限配置错误。
• 处理步骤：
  1. 确认当前用户角色/权限是否匹配请求资源。
  2. 与后端确认接口权限规则。
  3. 前端展示友好提示（如“您无权访问此内容”）。

404 Not Found

• 含义：请求的资源不存在。
• 责任排查：
  • 前端：请求 URL 错误、路由配置问题（SPA 应用）。
  • 后端：接口未部署、路由未定义、资源已被删除。
• 处理步骤：
  1. 仔细核对请求 URL 与文档是否一致（注意大小写、路径参数）。
  2. 检查前端路由配置（如 Vue Router / React Router）。
  3. 确认后端接口是否正常部署且路径匹配。

500 Internal Server Error

• 含义：服务器内部错误（后端代码异常）。
• 责任：后端。
• 前端处理：
  1. 捕获错误，避免页面崩溃。
  2. 展示友好错误提示（如“服务异常，请稍后重试”）。
  3. 将错误信息（时间、请求参数）上报日志系统。
  4. 通知后端排查服务器日志。

502 Bad Gateway

• 含义：网关/代理服务器无法从上游获取响应（如 Nginx 连接后端服务失败）。
• 责任：后端（服务宕机、负载过高、网络问题）。
• 前端处理：
  1. 提示用户“服务暂时不可用，请稍后再试”。
  2. 可引导用户尝试刷新页面。
  3. 通知运维或后端团队检查服务状态。

三、通用处理原则

1. 精准定位：
   使用浏览器 Network 面板 查看请求详情（URL、Headers、Payload、Status Code、Response Body）。

2. 区分责任：

   • 4xx 错误：优先自查前端代码和配置。
   • 5xx 错误：立即通知后端团队。

3. 用户友好：
   所有非 200 响应均需捕获异常，避免页面白屏。展示清晰提示，如“数据加载失败”、“登录已过期”。

4. 日志记录：
   关键错误（尤其是 5xx）应记录请求上下文（URL、参数、用户信息），方便回溯。

5. 主动联调：
   复杂问题使用 Postman 直接测试接口，快速定位前后端责任。

拓展阅读：
MDN HTTP 状态码文档
HTTP 状态码速查表 (PDF)