HTTP101

用圖解與練習理解 HTTP

「打開了開發者工具的 Network 分頁，卻不知道該看哪裡」「被問到 404 和 403 的差別時一時語塞」— 開始做 Web 之後每天都會碰到 HTTP，它的內容卻意外地難以讀懂。本課程不是要你死背 HTTP，而是讓你養成一個固定的閱讀型：HTTP 是「用文字寫成的往返書信」，每次都閱讀「請求了什麼（方法與路徑）・結果如何（狀態碼）・條件與補充（標頭）」這 3 點組合。課程以圖解掌握結構，並在各章途中用小題與模擬器邊確認邊前進。

圖解 → 原始文字 → 手算 → curl 共 43 題瀏覽器內評分 localStorage 儲存

所需時間

3〜4 小時

題目數

共 43 題

形式

7 章 + 小題 + 模擬器

費用

免費

顯示瀏覽器送往伺服器的請求（請求行・標頭・空行・內文）與伺服器回傳的回應（狀態行・標頭・空行・內文）一來一往的 HTTP 結構圖

HTTP 的真面目，就是這一來一往的文字。請求與回應都具有相同的骨架：「第 1 行 + 標頭 + 空行 + 內文」。把這副骨架放在腦中，之後的每一章都會變得好讀。

本課程的特色

本文正下方就有小題

採用讀完馬上解 2〜3 題的構成，比較不容易在「以為自己懂了」的狀態下繼續前進。

閱讀原始文字

請求行・狀態行・標頭在圖解之後，會以實際的文字原樣閱讀。curl 與開發者工具的輸出就直接成為教材。

快取判定模擬器

在第 5 章的模擬器中調整 max-age 與經過時間、ETag 的有無，就能親眼確認「請求會不會發出・回應是 200 還是 304・傳輸量是多少」如何變化。

瀏覽器內評分・免註冊

全部 43 題都在瀏覽器內評分，結果只儲存在你瀏覽器的 localStorage。不會向伺服器送出任何資料。

貫穿本課程的觀點 — 用 3 點組合閱讀往返書信

HTTP 是瀏覽器與伺服器之間交換的用文字寫成的往返書信。看起來困難的輸出，只要每次確認相同的 3 點就一定讀得懂。隨著章節推進，閱讀每一點的解析度也會逐步提高。

1. 請求了什麼

方法與路徑 — 是 GET 還是 POST、對哪個 URL。要讀的是請求行。（第 1〜2 章）

2. 結果如何

狀態碼 — 是成功、轉送、我方的錯誤，還是對方的故障。3 位數字會回答。（第 3 章）

3. 條件與補充是什麼

標頭 — 用什麼格式、多大的量、附帶什麼條件搬運。是往返書信的附註。（第 4〜5 章）

本課程的口訣：快被開發者工具或 curl 的輸出壓垮時，不要停止思考，讀下去 — 請求了什麼？結果如何？條件與補充是什麼？

章節構成

1 導入 — 閱讀瀏覽器與伺服器的 HTTP 對話 5 題。整理輸入 URL 之後發生的事（DNS → TCP → TLS → HTTP），掌握請求與回應原始文字的骨架，以及無狀態（stateless）的意義。 2 HTTP 方法 — 安全與冪等這兩個約定 6 題。畫清 GET・POST・PUT・DELETE・HEAD 的使用區分，以及安全・冪等這 2 個約定的界線，讓你能判斷「這是可以重試的更新嗎」。 3 HTTP 狀態碼 — 用 3 位數讀出結果 6 題。用百位數分成 5 類，並有根據地切分 301、302 與 308，401、403 與 404，500、502 與 503。 4 HTTP 標頭與內容 — 傳什麼、用什麼格式 6 題。把 Host・Content-Type・Content-Length・Accept・Cookie 當成「往返書信的附註」來閱讀，一路追到亂碼與 session 的機制。 5 HTTP 快取 — 同樣的東西不搬運兩次 6 題。手算 max-age 判定 fresh 與 stale，並用模擬器確認 ETag 與條件式 GET、304 的意義。 6 觀察 — 用 curl 與開發者工具閱讀真實的 HTTP 6 題。把 curl -v 的 > 與 <、-I 與 -L、開發者工具 Network 分頁的讀法，內化成典型的觀察步驟。 7 綜合演練 — 從案例解讀 HTTP 的對話 8 題。透過重新導向迴圈・表單重送・快取・亂碼等貼近實務的案例，橫跨運用全部章節的知識。

學習訣竅

請依本文 → 正下方的小題的順序前進。比起累積起來之後再解，讀完馬上解更容易記牢。
第 5 章的計算題不要用心算帶過，把接收時刻・經過秒數・max-age 寫在紙上。「fresh 還剩幾秒」會變成手的感覺。
第 5 章的模擬器，請在解小題的前後都操作一次。304 與傳輸量的關係會變成體感。
上完課後，請在實際的瀏覽器打開開發者工具的 Network 分頁，用平常瀏覽的網站試試3 點組合閱讀法。教材中的同一副骨架會出現在眼前。
在第 7 章的案例題卡住時，回到對應的章節複習 1〜2 輪就好。不需要全部重來。

開始前的前提

只要處於已經開始（或即將開始）製作網站或應用程式的階段就足夠了。不需要伺服器維運經驗。
只要看過 URL（像 https://example.com/path 這樣的形式），就可以從第 1 章讀起。
第 6 章的指令範例以可複製試跑的形式呈現，但即使不在手邊執行，也能在紙上讀完整個內容。