作為前端開發者，與后端 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）。
  • 后端：驗證邏輯過于嚴格或錯誤。
• 處理步驟：
  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)