HTTP 是什麼？Vibe Coder 一定要懂的網路基礎

每次你打開網頁、呼叫一支 API，背後都是 HTTP 在傳遞資料。不管是 OpenAI、Google、Stripe，還是你自己寫的後端，全部都用同一套規則溝通。這一課把 HTTP 拆開來看，讓你不只會用 AI 生程式，出錯的時候也看得懂發生了什麼事。

學會這一課之後，你會發現以前看不懂的錯誤訊息，例如 401、404、CORS 被擋，其實都有固定的排查順序，不用每次都靠猜的。

HTTP 是什麼：一次對話，兩個部分

HTTP（HyperText Transfer Protocol）是瀏覽器和伺服器之間溝通的規則。一次 HTTP 對話分成兩個部分：Request（請求）是你或你的程式發送出去的，說「我要什麼」；Response（回應）是伺服器回傳的，說「這是你要的」或「你的請求有問題」。

六個常用方法

HTTP 方法告訴伺服器「你想對這個資源做什麼事」。AI 生的程式裡 GET 和 POST 最常出現，但每個方法都有明確的語意，用錯了 API 會直接拒絕。

import requests

# GET：取得資料，參數放 URL
r = requests.get("https://api.example.com/users", params={"page": 1})

# POST：新增資料，資料放 body
r = requests.post("https://api.example.com/users",
    json={"name": "Joan", "email": "j@x.com"})

# DELETE：刪除資料
r = requests.delete("https://api.example.com/users/42")

狀態碼全覽：不同範圍代表不同問題

狀態碼是伺服器告訴你「這次請求的結果」的數字代碼。看狀態碼是排錯的第一步，不同範圍代表不同類型的問題。

Header：請求附帶的說明書

Header 是 HTTP 請求或回應附帶的元資料，告訴對方這個請求的身份、格式、認證資訊等等。AI 生的程式裡，Header 設定是最常出問題的地方。

headers = {
    "Authorization": f"Bearer {api_key}",
    "Content-Type": "application/json",
}
r = requests.post(url, headers=headers, json=data)

CORS：為什麼本機可以、上線就被擋

CORS（Cross-Origin Resource Sharing）是瀏覽器的安全機制，防止惡意網站偷偷存取其他網站的 API。只有在瀏覽器端的前端 JS 才會遇到，用 Python 直接呼叫 API 不受影響。

本機開發時，前端和後端通常都在 localhost，或者你直接用 Python 腳本呼叫 API，不經過瀏覽器的跨域限制。部署後前端在你的網站網域，後端在另一個 API 網域，兩個不同的來源，瀏覽器就開始擋了。

Access to fetch at 'https://api.example.com/data'
from origin 'https://yoursite.com' has been blocked
by CORS policy: No 'Access-Control-Allow-Origin' header
is present on the requested resource.

解法是在後端加上 CORS Header，用 FastAPI 的話最常見的做法如下。

from fastapi.middleware.cors import CORSMiddleware

app.add_middleware(
    CORSMiddleware,
    allow_origins=["https://yoursite.com"],
    allow_methods=["*"],
    allow_headers=["*"],
)

完整 HTTP 請求解剖

把一次完整的 API 呼叫拆開來看，理解每一個部分的作用。

POST /api/v1/messages HTTP/1.1
Host: api.anthropic.com
Authorization: Bearer sk-ant-abc123
Content-Type: application/json
Accept: application/json

{
  "model": "claude-sonnet-4-5",
  "messages": [{"role": "user", "content": "Hello"}]
}

Vibe Coder 的 HTTP 排錯 SOP

1. 先看狀態碼：2xx 是成功，4xx 是你的問題要改請求，5xx 是對方的問題，等一下或換方案。
2. 再看 Response Body：4xx 錯誤通常帶有錯誤說明，複製給 AI 一起分析。
3. 確認 Header 格式：收到 401 先確認 Authorization Header 格式是否符合文件。
4. CORS 錯誤一律回後端解決：前端的 CORS 錯誤要去後端加 CORS middleware，不是前端能自己解決的。