魯斯前端布魯斯前端

文章中英模式

布魯斯前端面試題目 - 常見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. 檢查網絡連接