本文為 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 錯誤頁面
你有沒有想過，當你在瀏覽器輸入網址按下 Enter，到底發生了什麼事？
其實就是你的瀏覽器跟遠端的伺服器「對話」了一下。而這個對話用的語言，就叫做 HTTP。
這篇文章會用一個「登入網站」的實際例子，帶你一步步看懂 HTTP 到底在幹嘛。
先看一個真實的 HTTP 請求
當你在網站上輸入帳號密碼，按下登入按鈕，瀏覽器會送出這樣的東西給網站伺服器：
POST /api/login HTTP/1.1
Host: www.example.com
Content-Type: application/json
User-Agent: Mozilla/5.0 Chrome/120.0.0.0
Origin: https://www.example.com
{
"username": "john",
"password": "123456"
}看起來有點複雜？別擔心，我們一行一行拆解。
請求的三大組成部分
一個 HTTP 請求由三個部分組成：
| 部分 | 英文 | 對應上面的哪段 | 在幹嘛 |
|---|---|---|---|
| 請求行 | Request Line | POST /api/login HTTP/1.1 | 我要幹嘛、去哪裡 |
| 請求頭 | Headers | Host: 到 Origin: 那幾行 | 額外資訊（信封上的資料） |
| 請求體 | Body | 最下面的 JSON | 實際要傳的內容（信的內容） |
英文Request Line
對應上面的哪段POST /api/login HTTP/1.1
在幹嘛我要幹嘛、去哪裡
英文Headers
對應上面的哪段Host: 到 Origin: 那幾行
在幹嘛額外資訊（信封上的資料）
英文Body
對應上面的哪段最下面的 JSON
在幹嘛實際要傳的內容（信的內容）
第一行：請求行 Request Line（我要幹嘛？去哪裡？）
POST /api/login HTTP/1.1這一行有三個資訊：
| 部分 | 範例 | 意思 |
|---|---|---|
| 動詞 | POST | 我要「送」資料給你 |
| 路徑 | /api/login | 送到你的 login 這個地方 |
| 版本 | HTTP/1.1 | 用 HTTP 1.1 版的規格溝通 |
範例POST
意思我要「送」資料給你
範例/api/login
意思送到你的 login 這個地方
範例HTTP/1.1
意思用 HTTP 1.1 版的規格溝通
HTTP 動詞有哪些？（HTTP Methods）
| 動詞 | 白話意思 | 什麼時候用 |
|---|---|---|
| GET | 我要「拿」東西 | 打開網頁、讀取資料 |
| POST | 我要「給」你東西 | 登入、註冊、送出表單 |
| PUT / PATCH | 我要「改」東西 | 更新個人資料 |
| DELETE | 我要「刪」東西 | 刪除一筆訂單 |
白話意思我要「拿」東西
什麼時候用打開網頁、讀取資料
白話意思我要「給」你東西
什麼時候用登入、註冊、送出表單
白話意思我要「改」東西
什麼時候用更新個人資料
白話意思我要「刪」東西
什麼時候用刪除一筆訂單
💡 就像去餐廳，你會說「我要點餐」或「我要結帳」，HTTP 動詞就是在告訴伺服器你的目的。
延伸閱讀：初學者指南：什麼是 HTTP 方法？
網址的結構（URL）
請求行裡的「路徑」其實是網址的一部分。完整的網址長這樣：
https://www.example.com/api/login?redirect=home| 部分 | 英文 | 範例 | 白話解釋 |
|---|---|---|---|
| 協議 | Protocol | https:// | 用加密的方式傳資料 |
| 主機 | Host | www.example.com | 要連到哪台電腦 |
| 路徑 | Path | /api/login | 那台電腦上的哪個位置 |
| 查詢字串 | Query String | ?redirect=home | 額外帶的參數（登入後跳轉到首頁） |
英文Protocol
範例https://
白話解釋用加密的方式傳資料
英文Host
範例www.example.com
白話解釋要連到哪台電腦
英文Path
範例/api/login
白話解釋那台電腦上的哪個位置
英文Query String
範例?redirect=home
白話解釋額外帶的參數（登入後跳轉到首頁）
💡 就像寄包裹：協議是「用哪家快遞」，主機是「收件地址」，路徑是「幾樓幾號房」，查詢字串是「包裹備註」。
延伸閱讀：
中間幾行：請求頭 Headers（額外資訊）
Host: www.example.com
Content-Type: application/json
User-Agent: Mozilla/5.0 Chrome/120.0.0.0
Origin: https://www.example.com這些是「關於這個請求」的額外資訊，格式都是 名稱: 值。
逐行解釋
| 請求頭 | 範例值 | 在講什麼 |
|---|---|---|
Host | www.example.com | 我要找的伺服器叫什麼名字 |
Content-Type | application/json | 我送的資料是 JSON 格式 |
User-Agent | Mozilla/5.0 Chrome/120.0.0.0 | 我用 Chrome 瀏覽器 |
Origin | https://www.example.com | 我從哪個網站發出這個請求 |
範例值www.example.com
在講什麼我要找的伺服器叫什麼名字
範例值application/json
在講什麼我送的資料是 JSON 格式
範例值Mozilla/5.0 Chrome/120.0.0.0
在講什麼我用 Chrome 瀏覽器
範例值https://www.example.com
在講什麼我從哪個網站發出這個請求
Content-Type 有哪些格式？
| 格式 | Content-Type | 長什麼樣子 | 什麼時候用 |
|---|---|---|---|
| JSON | application/json | {"name": "john"} | 最常用，API 幾乎都用這個 |
| 表單 | application/x-www-form-urlencoded | name=john&age=25 | 傳統 HTML 表單 |
| 檔案 | multipart/form-data | （二進位資料） | 上傳圖片、檔案 |
Content-Typeapplication/json
長什麼樣子{"name": "john"}
什麼時候用最常用，API 幾乎都用這個
Content-Typeapplication/x-www-form-urlencoded
長什麼樣子name=john&age=25
什麼時候用傳統 HTML 表單
Content-Typemultipart/form-data
長什麼樣子（二進位資料）
什麼時候用上傳圖片、檔案
延伸閱讀：
- 新手指南：什麼是 JSON？JSON.stringify 與 JSON.parse 完整教學
- 初學者指南：認識 Content-Type: application/x-www-form-urlencoded
其他常見的請求頭
| 請求頭 | 用途 |
|---|---|
Accept | 告訴伺服器「我想收到什麼格式的回應」 |
Authorization | 帶上我的身份驗證資訊（像是 Token） |
Cookie | 帶上之前存的 Cookie |
用途告訴伺服器「我想收到什麼格式的回應」
用途帶上我的身份驗證資訊（像是 Token）
用途帶上之前存的 Cookie
最下面：請求體 Body（實際要傳的資料）
{
"username": "john",
"password": "123456"
}這就是你真正要送給伺服器的資料。
延伸閱讀：
什麼時候需要請求體？
| 動詞 | 需要請求體嗎？ | 原因 |
|---|---|---|
| GET | ❌ 不需要 | 你只是要「拿」東西 |
| POST | ✅ 需要 | 你要「給」伺服器資料 |
| PUT/PATCH | ✅ 需要 | 你要告訴它「改成什麼」 |
| DELETE | ⚠️ 看情況 | 通常不需要 |
需要請求體嗎？❌ 不需要
原因你只是要「拿」東西
需要請求體嗎？✅ 需要
原因你要「給」伺服器資料
需要請求體嗎？✅ 需要
原因你要告訴它「改成什麼」
需要請求體嗎？⚠️ 看情況
原因通常不需要
伺服器怎麼回應？（HTTP Response）
你送出請求後，伺服器會回一個「響應」給你，格式長這樣：
HTTP/1.1 200 OK
Content-Type: application/json
{
"status": "success",
"data": {
"id": 1,
"name": "John"
}
}響應也有三個部分
| 部分 | 英文 | 對應上面的哪段 | 在幹嘛 |
|---|---|---|---|
| 狀態行 | Status Line | HTTP/1.1 200 OK | 告訴你結果如何 |
| 響應頭 | Response Headers | Content-Type: application/json | 回應的額外資訊 |
| 響應體 | Response Body | 下面的 JSON | 實際回傳的資料 |
英文Status Line
對應上面的哪段HTTP/1.1 200 OK
在幹嘛告訴你結果如何
英文Response Headers
對應上面的哪段Content-Type: application/json
在幹嘛回應的額外資訊
英文Response Body
對應上面的哪段下面的 JSON
在幹嘛實際回傳的資料
常見的狀態碼（Status Code）
| 狀態碼 | 意思 | 白話 |
|---|---|---|
200 OK | 成功 | 沒問題，資料給你 |
201 Created | 已建立 | 東西幫你建好了 |
400 Bad Request | 請求有誤 | 你傳的東西我看不懂 |
401 Unauthorized | 未授權 | 你沒登入或 Token 過期了 |
404 Not Found | 找不到 | 這個網址不存在 |
500 Internal Server Error | 伺服器錯誤 | 我這邊壞掉了 |
意思成功
白話沒問題，資料給你
意思已建立
白話東西幫你建好了
意思請求有誤
白話你傳的東西我看不懂
意思未授權
白話你沒登入或 Token 過期了
意思找不到
白話這個網址不存在
意思伺服器錯誤
白話我這邊壞掉了
| 格式 | 什麼時候用 |
|---|---|
| JSON | API 回傳資料（最常見） |
| HTML | 直接回傳網頁 |
| 純文字 | 簡單的錯誤訊息 |
| 二進位 | 回傳圖片、檔案 |
什麼時候用API 回傳資料（最常見）
什麼時候用直接回傳網頁
什麼時候用簡單的錯誤訊息
什麼時候用回傳圖片、檔案
完整流程總結
用登入當例子，整個流程是這樣：
sequenceDiagram
participant 瀏覽器
participant 伺服器
瀏覽器->>伺服器: POST /api/login（帳號密碼 JSON）
伺服器-->>瀏覽器: 200 OK（登入成功 + 用戶資料）常見的情境示例
情境 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>重點整理
| 概念 | 一句話解釋 |
|---|---|
| HTTP | 瀏覽器和伺服器之間的對話規則 |
| 請求行 | 我要幹嘛（動詞）+ 去哪裡（路徑） |
| 請求頭 | 這個請求的額外資訊 |
| 請求體 | 實際要傳的資料 |
| 狀態碼 | 伺服器告訴你「結果如何」 |
| Content-Type | 告訴對方「資料是什麼格式」 |
一句話解釋瀏覽器和伺服器之間的對話規則
一句話解釋我要幹嘛（動詞）+ 去哪裡（路徑）
一句話解釋這個請求的額外資訊
一句話解釋實際要傳的資料
一句話解釋伺服器告訴你「結果如何」
一句話解釋告訴對方「資料是什麼格式」
下一步可以做什麼？
- 打開瀏覽器按 F12，切到「Network」分頁，看看實際的 HTTP 請求長什麼樣子
- 下載 Postman，自己試著發送 HTTP 請求玩玩看
- 試著觀察登入、註冊、讀取資料時，分別用了什麼動詞