前端與後端的 HTTP 請求與響應協議
更新日期： 2025 年 1 月 1 日
本文為 Django + Vue 前後端分離解析，第 7 篇：
- 前後端分離的 404 錯誤處理：步驟指南
- 正常網頁與 API 接口：新手指南
- GraphQL 與 REST：理解新時代的 API 設計
- 為什麼自定義 404 頁面需要同時支持 API 和 HTML：新手指南
- 前後端分離中的路由與錯誤處理：新手指南
- 設計後端 API 的 404 錯誤處理：新手指南
- 前端與後端的 HTTP 請求與響應協議 👈 所在位置
- Django 中自定義 404 專案架構的最佳實踐
- 深入理解 Django 中的自定義 404 views 函數處理解析
- Django 的 handler404：自定義 404 錯誤頁面的核心
- Django 的 render 函數與 status 參數：為什麼重要？
- 使用 Accept 判斷請求格式：如何實現靈活的錯誤處理？
- 使用 Esbuild 搭建 Vue 開發環境的指南
- 新手入門：TailwindCSS 與 DaisyUI 的整合指南
- Django 靜態文件管理：static 與 staticfiles 完整指南
- 使用 WhiteNoise 簡化 Django 靜態文件管理：新手入門指南
- Vue 與 Django 整合：從編輯到部署的完整指南
- Django 與 Vue 的專案目錄與設計流程指南
- Django + Vue 前後端分離架構：後端路由渲染解析
- Vue 3 應用的主入口詳解：如何初始化應用
- 探索 Vue 應用的根組件：App.vue 的角色與設計
- Vue.js 單頁應用（SPA）邏輯與運作流程詳解
- 新手指南：使用 Axios 實現高效的 HTTP 請求
- 在 Vue 中處理 404 錯誤組件（component）設計：新手指南
- Vue Router 新手指南：設置 404 錯誤頁面
當前端與後端通信時，彼此之間的數據傳遞基於 HTTP 請求與響應協議。
無論是使用 API 的數據交互，還是直接返回 HTML 頁面，都包含以下兩個關鍵部分：
- 請求（Request）：前端發送給後端的數據，說明需要執行什麼操作。
- 響應（Response）：後端回應給前端的數據，提供請求結果。
瞭解請求與響應的格式對於設計高效的前後端通信至關重要。
本文將以簡單易懂的方式，帶你了解 前端請求格式 和 後端響應格式 的基本結構，以及如何根據應用需求決定數據格式。
前端發送的請求格式
請求的組成
一個 HTTP 請求通常由三部分構成：
- 請求行（Request Line）：描述操作類型、目標資源和協議版本。
- 示例：
POST /api/login HTTP/1.1
- 示例：
- 請求頭（Headers）：包含元數據，例如數據類型和認證信息。
- 示例：
Content-Type: application/json
- 示例：
- 請求體（Body）：包含具體的數據內容，僅在需要傳遞數據時使用。
- 示例：
{ "username": "john", "password": "123456" }
- 示例：
常見的請求頭
Content-Type：說明請求體的數據格式。- 示例：
application/json表示數據是 JSON 格式。
- 示例：
Accept：告訴後端希望返回的數據格式。- 示例：
application/json表示希望獲取 JSON。
- 示例：
常見的請求體格式
- JSON 格式（最常見）
- 用於結構化數據，簡單且通用。
- 示例：
{ "username": "john_doe", "password": "123456" }
- 表單格式（URL 編碼）
- 常用於提交表單數據。
- 示例：
username=john_doe&password=123456
- 多部分表單（Multipart Form Data）
- 用於上傳文件。
- 示例：
------WebKitFormBoundary Content-Disposition: form-data; name="file"; filename="image.jpg" Content-Type: image/jpeg
請求格式總結
| 組件 | 說明 |
|---|---|
| 請求行 | HTTP 方法、路徑和協議版本 |
| 請求頭 | Content-Type 和 Accept 等元數據 |
| 請求體 | JSON、表單數據或多部分數據 |
後端返回的響應格式
響應的組成
後端回應給前端的 HTTP 響應也包含三部分：
- 狀態行（Status Line）：描述響應的狀態碼和協議版本。
- 示例：
HTTP/1.1 200 OK
- 示例：
- 響應頭（Headers）：描述響應內容的元數據。
- 示例：
Content-Type: application/json
- 示例：
- 響應體（Body）：實際的數據內容。
常見的響應頭
Content-Type：說明響應數據的格式。- 示例：
application/json表示數據是 JSON 格式。
- 示例：
Cache-Control：指定緩存策略。- 示例：
Cache-Control: no-cache
- 示例：
常見的響應體格式
- JSON 格式（最常用）
- 適合結構化數據，尤其在前後端分離應用中。
- 示例：
{ "status": "success", "data": { "id": 1, "name": "John" } }
- HTML 格式
- 適合直接顯示的頁面。
- 示例：
<html> <body> <h1>404 - Page Not Found</h1> </body> </html>
- 文本格式
- 適合簡單的信息提示。
- 示例：
Error: Unauthorized
- 二進制數據
- 用於返回文件或媒體內容，如圖片、音頻等。
響應格式總結
| 組件 | 說明 |
|---|---|
| 狀態行 | HTTP 協議版本和狀態碼 |
| 響應頭 | Content-Type 和緩存策略等元數據 |
| 響應體 | JSON、HTML、文本或二進制文件 |
常見的情境示例
情境 1：API 通信（JSON 格式）
- 請求：
POST /api/login HTTP/1.1
Content-Type: application/json
Accept: application/json
{
"username": "john_doe",
"password": "123456"
}- 響應：
HTTP/1.1 200 OK
Content-Type: application/json
{
"message": "login successful",
"token": "abcdef12345"
}
情境 2：表單提交
- 請求：
POST /submit-form HTTP/1.1
Content-Type: application/x-www-form-urlencoded
name=John&age=30
- 響應：
HTTP/1.1 200 OK
Content-Type: application/json
{
"message": "Form submitted successfully"
}
情境 3：瀏覽器直接訪問（HTML 格式）
- 請求：
GET /home HTTP/1.1
Accept: text/html- 響應：
HTTP/1.1 200 OK
Content-Type: text/html
<html>
<body>
<h1>Welcome to the homepage!</h1>
</body>
</html>如何根據請求決定響應格式？
後端可以根據請求的 Accept 頭部決定返回的響應格式。例如，在 Django 中：
def custom_view(request):
if "application/json" in request.headers.get("Accept", ""):
return JsonResponse({"message": "This is JSON"})
else:
return render(request, "template.html")
- 如果
Accept: application/json，返回 JSON 格式。 - 如果
Accept: text/html或未指定，返回 HTML 模板。
總結
- 請求格式：
- 前端請求包含三部分：請求行、請求頭、請求體。
- 常用的請求體格式是 JSON 和 URL 編碼。
- 響應格式：
- 後端響應也包含三部分：狀態行、響應頭、響應體。
- 常見的響應格式是 JSON 和 HTML。
- 動態決定響應格式：
- 根據
Accept頭部判斷，滿足不同客戶端的需求。
- 根據
了解請求與響應的格式，能讓你更好地設計前後端通信邏輯。