鲁斯前端布鲁斯前端

文章中英模式

布鲁斯前端面试题目 - 常见HTTP状态码

整理常见HTTP状态码的含义、使用场景与实例。掌握前端面试中经常被问到的HTTP状态码相关知识，提升API开发与错误处理能力。

影片縮圖

懒得看文章？那就来看视频吧

HTTP状态码概述

HTTP状态码是服务器对客户端HTTP请求的响应代码，用三位数字表示不同的响应结果。

  • 1. 2xx - 成功: 请求已成功接收、理解和接受 (例如: 200 OK - 请求成功)
  • 2. 3xx - 重定向: 需要进一步操作才能完成请求 (例如: 301 Moved Permanently - 网址永久转移)
  • 3. 4xx - 客户端错误: 请求包含语法错误或无法完成 (例如: 401 Unauthorized - 未授权访问, 403 Forbidden - 禁止访问, 404 Not Found - 资源不存在)
  • 4. 5xx - 服务器错误: 服务器在处理请求时发生错误 (例如: 500 Internal Server Error - 服务器内部错误)

2xx - 成功状态码

200 OK

请求成功。返回的信息取决于请求方法:

  • 1. GET: 资源已获取并在响应中返回
  • 2. POST: 资源创建成功，新资源在响应中返回
  • 3. PUT/PATCH: 资源更新成功
HTTP/1.1 200 OK
Content-Type: application/json
Content-Length: 42

{"message": "资源请求成功", "data": {...}}

201 Created

请求成功并创建了新资源。通常用于POST请求后。

HTTP/1.1 201 Created
Location: /api/resources/12345
Content-Type: application/json
Content-Length: 42

{"id": "12345", "name": "新资源", "created_at": "..."}

204 No Content

请求成功，但没有返回任何内容。常用于PUT, PATCH或DELETE操作。

HTTP/1.1 204 No Content
Date: Wed, 21 Oct 2023 13:45:26 GMT

3xx - 重定向状态码

301 Moved Permanently

请求的资源已永久移动到新位置。浏览器会自动跳转并缓存该重定向。

HTTP/1.1 301 Moved Permanently
Location: https://www.example.com/new-url
Content-Type: text/html

302 Found (临时重定向)

请求的资源临时位于不同的URL。不同于301，浏览器不应永久缓存此重定向。

HTTP/1.1 302 Found
Location: https://www.example.com/temporary-url
Content-Type: text/html

304 Not Modified

资源未修改，可使用缓存版本。通常是对包含If-Modified-Since或If-None-Match头的请求的响应。

HTTP/1.1 304 Not Modified
Date: Wed, 21 Oct 2023 07:28:00 GMT
ETag: "737060cd8c284d8af7ad3082f209582d"
Cache-Control: max-age=3600

4xx - 客户端错误状态码

400 Bad Request

服务器无法理解请求的格式，客户端应修改请求后再次发送。

HTTP/1.1 400 Bad Request
Content-Type: application/json
Content-Length: 35

{"error": "请求参数格式不正确"}

401 Unauthorized

没有进行身份验证或身份验证失败。响应必须包括WWW-Authenticate头以指示客户端如何认证。

HTTP/1.1 401 Unauthorized
WWW-Authenticate: Basic realm="Access to the staging site"
Content-Type: application/json
Content-Length: 27

{"error": "需要身份验证"}

403 Forbidden

服务器理解请求但拒绝执行，权限不足。不同于401，身份验证不会改变结果。

HTTP/1.1 403 Forbidden
Content-Type: application/json
Content-Length: 29

{"error": "没有访问权限"}

404 Not Found

请求的资源不存在。也可能表示不愿透露资源存在与否。

HTTP/1.1 404 Not Found
Content-Type: application/json
Content-Length: 27

{"error": "资源不存在"}

405 Method Not Allowed

请求方法不支持。应返回Allow头，说明允许使用的方法。

HTTP/1.1 405 Method Not Allowed
Allow: GET, POST
Content-Type: application/json
Content-Length: 41

{"error": "不支持PUT方法于此资源"}

429 Too Many Requests

用户在给定时间内发送了太多请求（「限流」）。

HTTP/1.1 429 Too Many Requests
Content-Type: application/json
Retry-After: 3600
Content-Length: 41

{"error": "请求频率超限，请1小时后重试"}

5xx - 服务器错误状态码

500 Internal Server Error

服务器遇到了意料之外的情况，无法完成请求。

HTTP/1.1 500 Internal Server Error
Content-Type: application/json
Content-Length: 36

{"error": "服务器内部错误"}

502 Bad Gateway

作为网关或代理的服务器从上游服务器收到无效响应。

HTTP/1.1 502 Bad Gateway
Content-Type: application/json
Content-Length: 31

{"error": "上游服务器响应无效"}

503 Service Unavailable

服务器暂时过载或维护中。Retry-After头可指示客户端多久后重试。

HTTP/1.1 503 Service Unavailable
Retry-After: 120
Content-Type: application/json
Content-Length: 56

{"error": "服务暂时不可用，请2分钟后重试"}

504 Gateway Timeout

作为网关或代理的服务器在等待上游服务器响应时超时。

HTTP/1.1 504 Gateway Timeout
Content-Type: application/json
Content-Length: 31

{"error": "上游服务器响应超时"}

🔥 常见面试题目

(一) 401和403状态码有什么区别?

401 Unauthorized

'我不认识你，请先登录'

用户未提供身份验证或验证失败

403 Forbidden

'我认识你，但你没权限'

用户已认证，但权限不足

(二) 301和302重定向有什么不同?

301 永久重定向

网址永久搬家，以后都去新地址

浏览器会记住新地址

SEO：排名权重转移到新网址

使用场景：

  • 1. 网站域名变更
  • 2. 强制使用HTTPS

302 临时重定向

网址暂时换地方，下次还是来原地址

浏览器每次都会先访问原网址

SEO：排名保留在原网址

使用场景：

  • 1. A/B测试
  • 2. 维护期间临时页面

(三) 前端如何处理HTTP错误码?

1

设置全局错误处理器

2

针对不同错误码采取不同措施

3

显示用户友好的错误信息

4

记录错误并上报分析

// Axios全局错误处理简例
axios.interceptors.response.use(
  response => response,
  error => {
    if (error.response) {
      switch (error.response.status) {
        case 401: // 未授权
          router.push('/login');
          break;
        case 403: // 权限不足
          showMessage('你没有权限执行此操作');
          break;
        case 404: // 资源不存在
          showMessage('请求的资源不存在');
          break;
        case 500: // 服务器错误
          showMessage('服务器出错，请稍后重试');
          reportError(error);
          break;
      }
    } else {
      showMessage('网络连接失败');
    }
    return Promise.reject(error);
  }
);

(四) 200 OK和204 No Content的区别?

200 OK

请求成功，这是你要的数据

适用场景：

  • 1. GET请求获取资源
  • 2. 需要返回数据的操作

204 No Content

请求成功，但没有数据返回

适用场景：

  • 1. DELETE操作成功
  • 2. 只需确认成功的操作
  • 3. 节省流量的场景

(五) 500错误和504错误的区别?

500 Internal Server Error

服务器内部错误

👨‍💻 → 🖥️ ❌

服务器自身出错

排查方向：

  • 1. 检查服务器错误日志
  • 2. 检查应用程序代码
  • 3. 检查数据库连接

504 Gateway Timeout

网关超时错误

👨‍💻 → 🔄 → 🖥️ ⏱️

代理等待上游服务器超时

排查方向：

  • 1. 检查上游服务器状态
  • 2. 检查代理超时设置
  • 3. 检查网络连接