📋 HTTP 標頭

📖 定義

HTTP 標頭是客戶端和伺服器交換額外資訊的元資料。它定義了有關請求和回應的資訊、驗證、快取、內容類型等。

🎯 用比喻來理解

郵件信封

HTTP 訊息 = 信件
├─ 信封 (標頭)
│  ├─ 寄件人地址 (User-Agent)
│  ├─ 收件人地址 (Host)
│  ├─ 郵件類型 (Content-Type)
│  ├─ 重要性 (Priority)
│  └─ 退信地址 (Referer)
└─ 信件內容 (主體)

先查看信封(標頭)：
- 確認誰發送
- 了解郵件類型
- 決定如何處理

💡 標頭結構

標頭格式：
標頭名稱: 值

範例：
Content-Type: application/json
Authorization: Bearer abc123
User-Agent: Mozilla/5.0

📬 請求標頭 (Request Headers)

Host

請求的伺服器主機名稱和埠

GET /api/users HTTP/1.1
Host: example.com

// fetch 會自動設定 Host 標頭
fetch('https://example.com/api/users');

特點：

• HTTP/1.1 起必須
• 可在同一 IP 上托管多個域名（虛擬主機）
• 瀏覽器自動設定

User-Agent

客戶端應用程式資訊

GET /api/users HTTP/1.1
Host: example.com
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36

// 在 Node.js 中設定自訂 User-Agent
fetch('https://api.example.com/users', {
  headers: {
    'User-Agent': 'MyApp/1.0'
  }
});

用途：

• 識別瀏覽器/作業系統
• 收集統計
• 相容性處理
• 機器人偵測

Accept

客戶端可接受的媒體類型

GET /api/users HTTP/1.1
Host: example.com
Accept: application/json, text/html
Accept-Language: zh-TW, en-US
Accept-Encoding: gzip, deflate, br

fetch('https://api.example.com/users', {
  headers: {
    'Accept': 'application/json',
    'Accept-Language': 'zh-TW,zh;q=0.9,en;q=0.8',
    'Accept-Encoding': 'gzip, deflate, br'
  }
});

Accept 標頭種類：

Accept
├─ Accept: application/json       - 偏好 JSON
├─ Accept: text/html              - 偏好 HTML
└─ Accept: */*                    - 允許所有類型

Accept-Language
├─ Accept-Language: zh-TW         - 偏好中文（繁體）
└─ Accept-Language: en-US,en;q=0.9 - 也接受英文（優先順序較低）

Accept-Encoding
├─ Accept-Encoding: gzip          - 支持 gzip 壓縮
└─ Accept-Encoding: br, gzip      - 偏好 Brotli，也可接受 gzip

Accept-Charset（幾乎不使用）
└─ Accept-Charset: utf-8          - UTF-8 編碼

Authorization

驗證資訊

GET /api/profile HTTP/1.1
Host: example.com
Authorization: Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...

// JWT 權杖驗證
fetch('https://api.example.com/profile', {
  headers: {
    'Authorization': 'Bearer ' + token
  }
});

// Basic 驗證
const credentials = btoa('username:password');
fetch('https://api.example.com/profile', {
  headers: {
    'Authorization': 'Basic ' + credentials
  }
});

驗證方式：

Bearer 權杖（最常見）
Authorization: Bearer <token>
├─ 在 JWT、OAuth 2.0 中使用
└─ 例如：Bearer eyJhbGci...

Basic 驗證
Authorization: Basic <base64-credentials>
├─ 將 username:password 進行 Base64 編碼
├─ 不安全（必須使用 HTTPS）
└─ 例如：Basic dXNlcm5hbWU6cGFzc3dvcmQ=

API 金鑰
Authorization: ApiKey <api-key>
或
X-API-Key: <api-key>

Content-Type

請求主體的媒體類型

POST /api/users HTTP/1.1
Host: example.com
Content-Type: application/json

{
  "name": "王小明",
  "email": "wang@example.com"
}

// 傳送 JSON
fetch('https://api.example.com/users', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({
    name: '王小明',
    email: 'wang@example.com'
  })
});

// 傳送表單資料
const formData = new FormData();
formData.append('name', '王小明');
formData.append('file', fileInput.files[0]);

fetch('https://api.example.com/upload', {
  method: 'POST',
  body: formData
  // Content-Type 會自動設定 (multipart/form-data)
});

主要 Content-Type：

application/json
├─ JSON 資料
└─ 最常見的 API 格式

application/x-www-form-urlencoded
├─ 表單資料（預設）
└─ key1=value1&key2=value2

multipart/form-data
├─ 檔案上傳
└─ 由多個部分組成

text/plain
├─ 純文字
└─ 簡單資料

application/xml
├─ XML 資料
└─ 舊版 API

[後續部分已省略，如需全文請告知]