第 1 週 · HTTP 基礎與第一個 Worker
前端與後端的角色、HTTP 請求與回應
用 DevTools 的 Network 面板，親眼看瀏覽器問了什麼、伺服器回了什麼。
正在打開這一關…
學習目標
- 說得出前端與後端各自負責的事
- 分得清一筆 HTTP 請求與它的回應
- 會在 DevTools 裡點開一筆真實的網路紀錄
你做過的網頁，多半是瀏覽器把 HTML、CSS、JavaScript 畫出來。後端是另一頭：它收下來自瀏覽器的問題，決定要回什麼。這一課先不寫很多程式，先把「誰在說話」看清楚。後面每一課都會用到這個畫面。
用生活例子理解
把網站想成一間餐廳。
- 前端是菜單、裝潢、你點餐時看到的畫面。HTML 是結構，CSS 是外觀，JavaScript 是互動。
- 後端是廚房。客人看不到爐火，但菜是這裡做出來的。
- HTTP是點餐的規矩。你不能走進廚房大喊，你要照格式說「我要這一道」。廚房也照格式回答「好，這是你的菜」或「沒有這道菜」。
一次完整的來回叫做一筆 請求（request） 加上一筆 回應（response）。請求是客人開口，回應是廚房端出來的東西。
請求與回應裡有什麼
一筆請求至少有三樣東西：
- 方法，例如
GET。今天先把它想成「我要看」。明天會認識其他動詞。 - 網址，例如
https://example.com/about。它指出你要找的那一扇門。 - 標頭（headers），像信封上的註記：我是誰、我看得懂哪種語言。信的正文叫做 本文（body）。看頁面的
GET常常沒有本文。
回應也有三樣：
- 狀態碼，一個三位數。
200是「順利」，404是「這裡沒有你要的東西」。 - 標頭，例如這份資料是 HTML 還是 JSON。
- 本文，真正的頁面或資料。
生活比喻：狀態碼像廚房窗口的短句。「來了」是 200，「菜單上沒有」是 404，「廚房著火」是 500。短句不是菜本身，菜是本文。
動手做
大約 20 分鐘。用你已經會開的瀏覽器就好。
- 開一個你熟悉的網站，例如你自己做過的作品集。
- 按
F12（macOS 用Option + Command + I）打開開發者工具，切到 Network。 - 勾選 Disable cache，再重新整理頁面。
- 在清單裡點第一筆文件（類型通常是
document）。 - 看 Headers 分頁，找出這四樣並抄在筆記裡：
- Request URL（完整網址）
- Request Method（多半是
GET） - Status Code（多半是
200） - Response Header 裡的
content-type
- 再點一筆圖片或 CSS。比較它的網址與
content-type跟文件有什麼不同。 - 選一筆請求，切到 Response，確認你看到的是頁面或檔案內容，不是標頭。
你不需要改任何東西。目標是能指著畫面上說：「這是請求，這是回應。」
案例
下面這段不是今天要佈署的產品，而是一封「最小的回應」。Cloudflare Workers 用現代的 ES Module 寫法：檔案預設匯出一個物件，裡面有 fetch。有人來連線，fetch 就被呼叫，你回一個 Response。
export default {
async fetch(request) {
const url = new URL(request.url);
// 請求列：方法 + 路徑。例如 GET /about
const line = `${request.method} ${url.pathname}`;
// 回應：狀態 200，本文是一段純文字，標頭說明編碼。
return new Response(`收到請求：${line}\n`, {
status: 200,
headers: {
"content-type": "text/plain; charset=utf-8",
},
});
},
};對照成 HTTP 的形狀，概念上像這樣（這是示意，真的連線時會多一些標頭）：
GET /about HTTP/1.1
Host: example.com
Accept: text/html
HTTP/1.1 200 OK
content-type: text/html; charset=utf-8
<!doctype html><p>關於我們</p>常見錯誤
- 把「前端看不到的東西」都叫後端。圖片檔、CSS 檔也是伺服器回給你的，只是它們不是程式算出來的。
- 只看畫面，不看 Network。畫面是結果，Network 才是對話紀錄。
- 把狀態碼當成頁面內容。
404那個頁面仍然是一份回應，狀態碼告訴你這次不算找到資源。 - 在 Network 沒勾 Disable cache，結果看到
304或(disk cache)，以為網站壞了。那只是瀏覽器在用舊檔。
自我檢查
不用交卷，用自己的話回答就好。
- 前端負責什麼？後端負責什麼？各舉一個你做過或看過的例子。
- 一筆請求裡，方法、網址、標頭分別像餐廳的什麼？
- 你在 Network 裡看到的狀態碼是多少？它代表順利，還是有問題？