前端常见 HTTP 状态码
作为前端开发者，与后端 API 交互时，HTTP 状态码是判断请求成败的关键信号。理解常见状态码的含义、责任归属及应对策略，能极大提升调试效率和团队协作。以下是关键状态码的详细解析：
首先说一下如何查看状态码：
如上图
项目运行之后，打开浏览器开发者工具（F12），查看 Network 面板查看状态码
一、常见状态码分类
| 状态码 | 含义 | 主要责任方 | 常见触发场景 |
|---|---|---|---|
| 200 | OK | 后端 | 请求成功，返回预期数据 |
| 304 | Not Modified | 前端 | 资源未变更，使用本地缓存 |
| 400 | Bad Request | 需排查 | 请求参数/格式错误 |
| 401 | Unauthorized | 需排查 | 未认证/Token失效 |
| 403 | Forbidden | 需排查 | 无权限访问资源 |
| 404 | Not Found | 需排查 | 资源不存在 |
| 500 | Internal Error | 后端 | 服务器内部错误 |
| 502 | Bad Gateway | 后端 | 网关/上游服务问题 |
二、关键状态码与处理方案
200 OK
- 含义：请求成功，响应包含预期数据。
- 责任：后端（返回正确数据）。
- 前端处理：正常处理响应数据。
304 Not Modified
- 含义：资源未修改，可使用本地缓存。
- 责任：前端（缓存策略生效）。
- 前端处理：直接使用本地缓存资源，无需额外请求。
400 Bad Request
- 含义：客户端请求错误（参数缺失、格式错误等）。
- 责任排查：
- 前端：检查请求参数、格式（JSON/FormData）、请求头（如
Content-Type）。 - 后端：验证逻辑过于严格或错误。
- 前端：检查请求参数、格式（JSON/FormData）、请求头（如
- 处理步骤：
- 打开浏览器开发者工具（F12），查看 Network 面板中的请求负载（Payload）。
- 比对 API 文档，确认参数名称、类型、是否必填。
- 使用
JSON.stringify()或console.log打印请求数据，确保格式正确。 - 与后端确认接口校验规则。
401 Unauthorized
- 含义：未认证或认证失效（如 Token 过期）。
- 责任排查：
- 前端：未发送 Token、Token 格式错误、Token 过期未刷新。
- 后端：Token 验证逻辑错误。
- 处理步骤：
- 检查请求头是否包含
Authorization: Bearer <token>。 - 验证 Token 是否过期（前端可解码 JWT 检查
exp字段）。 - 实现 Token 自动刷新逻辑，或在 401 时跳转登录页。
- 检查请求头是否包含
403 Forbidden
- 含义：已认证但权限不足。
- 责任排查：
- 前端：请求了当前用户无权访问的资源。
- 后端：权限配置错误。
- 处理步骤：
- 确认当前用户角色/权限是否匹配请求资源。
- 与后端确认接口权限规则。
- 前端展示友好提示（如“您无权访问此内容”）。
404 Not Found
- 含义：请求的资源不存在。
- 责任排查：
- 前端：请求 URL 错误、路由配置问题（SPA 应用）。
- 后端：接口未部署、路由未定义、资源已被删除。
- 处理步骤：
- 仔细核对请求 URL 与文档是否一致（注意大小写、路径参数）。
- 检查前端路由配置（如 Vue Router / React Router）。
- 确认后端接口是否正常部署且路径匹配。
500 Internal Server Error
- 含义：服务器内部错误（后端代码异常）。
- 责任：后端。
- 前端处理：
- 捕获错误，避免页面崩溃。
- 展示友好错误提示（如“服务异常，请稍后重试”）。
- 将错误信息（时间、请求参数）上报日志系统。
- 通知后端排查服务器日志。
502 Bad Gateway
- 含义：网关/代理服务器无法从上游获取响应（如 Nginx 连接后端服务失败）。
- 责任：后端（服务宕机、负载过高、网络问题）。
- 前端处理：
- 提示用户“服务暂时不可用，请稍后再试”。
- 可引导用户尝试刷新页面。
- 通知运维或后端团队检查服务状态。
三、通用处理原则
-
精准定位：
使用浏览器 Network 面板 查看请求详情（URL、Headers、Payload、Status Code、Response Body）。 -
区分责任：
- 4xx 错误：优先自查前端代码和配置。
- 5xx 错误：立即通知后端团队。
-
用户友好：
所有非 200 响应均需捕获异常，避免页面白屏。展示清晰提示，如“数据加载失败”、“登录已过期”。 -
日志记录：
关键错误（尤其是 5xx）应记录请求上下文（URL、参数、用户信息），方便回溯。 -
主动联调：
复杂问题使用 Postman 直接测试接口，快速定位前后端责任。
拓展阅读：
MDN HTTP 状态码文档
HTTP 状态码速查表 (PDF)