状态码

一、状态码分类与核心用途

分类	类别描述	常见状态码示例
1xx	信息性状态码	101 Switching Protocols（协议升级）
2xx	成功状态码	200 OK、201 Created、204 No Content
3xx	重定向状态码	301 Moved Permanently、302 Found、304 Not Modified
4xx	客户端错误状态码	400 Bad Request、401 Unauthorized、404 Not Found
5xx	服务器错误状态码	500 Internal Server Error、502 Bad Gateway

二、高频状态码深度解析

1. 2xx 成功类

• 200 OK

  • 含义：请求成功，响应包含请求的资源。
  • 场景：GET 请求成功获取数据，POST 请求成功提交数据。

• 201 Created

  • 含义：请求已成功，并创建了新资源（如用户注册、文件上传）。
  • 特点：响应头需包含新资源的 URL（Location 字段）。

• 204 No Content

  • 含义：请求成功，但响应中不含实体内容（如删除操作成功）。
  • 应用：常用于 RESTful API 的删除接口，减少数据传输。

2. 3xx 重定向类

• 301 Moved Permanently

  • 含义：资源永久重定向，浏览器会缓存新 URL（如域名变更）。
  • 示例：旧域名 abc.com 永久重定向到 def.com。

• 302 Found

  • 含义：资源临时重定向（如登录页重定向到首页）。
  • 注意：POST 请求重定向时，浏览器可能丢失请求体（需用 307 Temporary Redirect 保持方法）。

• 304 Not Modified

  • 含义：资源未修改，客户端可使用缓存（配合 Last-Modified/ETag 实现）。
  • 优化：减少服务器负载和带宽消耗。

3. 4xx 客户端错误类

• 400 Bad Request

  • 含义：请求语法错误（如参数格式错误、JSON 解析失败）。
  • 排查：检查请求参数是否符合接口规范。

• 401 Unauthorized

  • 含义：未授权（如 JWT 令牌过期、API 密钥错误）。
  • 处理：前端应重定向到登录页或提示用户重新认证。

• 403 Forbidden

  • 含义：服务器拒绝请求（如用户无权限访问资源）。
  • 区别：401 是未认证，403 是已认证但无权限。

• 404 Not Found

  • 含义：请求的资源不存在（如 URL 错误、资源被删除）。
  • 优化：前端可展示自定义 404 页面，提升用户体验。

4. 5xx 服务器错误类

• 500 Internal Server Error

  • 含义：服务器内部错误（如代码异常、数据库连接失败）。
  • 处理：后端需记录错误日志，前端提示用户稍后重试。

• 502 Bad Gateway

  • 含义：网关错误（如反向代理服务器未获取到上游服务器响应）。
  • 场景：微服务架构中，服务间调用超时或崩溃。

• 503 Service Unavailable

  • 含义：服务器暂时不可用（如过载、维护中）。
  • 优化：可返回 Retry-After 头，告知用户重试时间。

三、问题

1. 问：301 和 302 有什么区别？

• 答：
  • 301 是永久重定向，浏览器会缓存新 URL，搜索引擎会更新索引；
  • 302 是临时重定向，浏览器不缓存，搜索引擎不更新索引。

2. 问：401 和 403 的区别是什么？

• 答：
  • 401 表示未认证（如未登录），需提供认证信息；
  • 403 表示已认证但无权限（如普通用户访问管理员页面）。

3. 问：如何实现浏览器缓存（304）？

• 答：
  • 服务器返回资源时，添加 Last-Modified（最后修改时间）或 ETag（资源指纹）；
  • 客户端下次请求时，通过 If-Modified-Since 或 If-None-Match 发送缓存标识；
  • 服务器对比标识，若资源未修改则返回 304，否则返回 200 和新资源。

4. 问：前端如何处理 401 状态码？

• 答：
  • 在 axios 拦截器中监听 401 响应；
  • 清除本地令牌，重定向到登录页；
  • 示例代码：

    axios.interceptors.response.use(
      response => response,
      error => {
        if (error.response && error.response.status === 401) {
          localStorage.removeItem('token');
          router.push('/login');
        }
        return Promise.reject(error);
      }
    );
    

四、实战场景与状态码设计

1. 文件上传场景

   • 成功：201 Created（返回新文件 URL）；
   • 失败：400 Bad Request（格式错误）、500 Internal Server Error（服务器异常）。

2. RESTful API 设计

   • GET /users：200 OK（返回用户列表）；
   • POST /users：201 Created（创建用户成功）；
   • DELETE /users/1：204 No Content（删除成功，无返回体）。

3. 前后端联调常见问题

   • 400：检查请求参数格式（如 JSON 语法错误）；
   • 500：后端接口报错，需查看服务器日志；
   • 跨域问题：非状态码错误，需检查 CORS 配置（Access-Control-Allow-Origin）。