HTTP 請求的組成部分

一個 HTTP 請求（HTTP Request）是由客戶端（例如瀏覽器）發送到伺服器，用來請求資源（例如網頁、API 資料等）。它包含以下幾個主要部分：

1. 請求行（Request Line）

2. 請求頭（Request Headers）

3. 請求主體（Request Body，選填）

讓我們一步步來詳細說明每部分的內容，並提供範例。

---

1. 請求行（Request Line）

請求行是 HTTP 請求的第一行，包含三個核心元素：

• HTTP 方法（Method）：表示請求的動作，例如 GET、POST、PUT、DELETE 等。

• 請求目標（Request Target）：通常是 URL 的路徑（Path），指明要訪問的資源，例如 /api/users。

• HTTP 版本（HTTP Version）：指定使用的 HTTP 協議版本，例如 HTTP/1.1 或 HTTP/2。

範例：

GET /api/users HTTP/1.1

• GET：表示這是一個獲取資料的請求。

• /api/users：表示請求的資源路徑。

• HTTP/1.1：表示使用 HTTP 1.1 協議。

---

2. 請求頭（Request Headers）

請求頭是用來提供額外的資訊，告訴伺服器更多關於請求的細節或客戶端的設定。這些頭是鍵值對（Key-Value Pair）的格式，每行一個頭。

常見的請求頭包括：

• Host：指定伺服器的域名或 IP 地址，例如 example.com。

• User-Agent：描述發送請求的客戶端（例如瀏覽器類型、版本等）。

• Accept：告訴伺服器客戶端接受的回應格式（例如 application/json）。

• Content-Type：如果有請求主體，指定主體的資料格式（例如 application/json 或 application/x-www-form-urlencoded）。

• Authorization：用於傳送認證資訊，例如 API Token 或 Bearer Token。

• Content-Length：表示請求主體的長度（以字節為單位）。

範例：

Host: example.com
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) Chrome/91.0.4472.124
Accept: application/json
Content-Type: application/json
Authorization: Bearer abc123

說明：

• Host 告訴伺服器請求的目標域名。

• User-Agent 顯示這是來自 Chrome 瀏覽器的請求。

• Accept 表示客戶端希望接收 JSON 格式的回應。

• Content-Type 表示如果有請求主體，格式是 JSON。

• Authorization 表示這是一個需要認證的請求，帶有 Bearer Token。

---

3. 請求主體（Request Body）

請求主體是 HTTP 請求的可選部分，通常在 POST、PUT 等方法中使用，用來傳送資料給伺服器（例如表單資料、JSON 資料等）。GET 請求通常沒有主體。

範例： 假設你用 POST 方法提交一個 JSON 格式的資料：

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

說明：

• 請求主體的格式由 Content-Type 頭決定，例如 application/json 表示 JSON 格式。

• 如果是表單提交，Content-Type 可能是 application/x-www-form-urlencoded，主體會像是 name=小明&email=xiaoming@example.com。

---

完整的 HTTP 請求範例

假設你使用 React 的 fetch API 發送一個 POST 請求到 <https://api.example.com/users，完整的> HTTP 請求可能看起來像這樣：

POST /users HTTP/1.1
Host: api.example.com
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) Chrome/91.0.4472.124
Accept: application/json
Content-Type: application/json
Content-Length: 56
Authorization: Bearer abc123

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

---

在 React 中如何發送 HTTP 請求

既然你提到使用 React，我提供一個簡單的範例，展示如何使用 fetch 來發送上述的 POST 請求。程式碼會寫得詳細且容易跟著操作。

範例程式碼：

import React, { useState } from "react";
function App() {
  const [name, setName] = useState("");
  const [email, setEmail] = useState("");
  const [response, setResponse] = useState(null);
  const handleSubmit = async (e) => {
    e.preventDefault();
    // 準備要發送的資料
    const data = {
      name: name,
      email: email,
    };
    try {
      // 使用 fetch 發送 POST 請求
      const res = await fetch("https://api.example.com/users", {
        method: "POST", // 指定 HTTP 方法
        headers: {
          "Content-Type": "application/json", // 指定請求主體的格式
          Authorization: "Bearer abc123", // 認證用的 Token
        },
        body: JSON.stringify(data), // 將資料轉為 JSON 字串
      });
      // 檢查回應是否成功
      if (!res.ok) {
        throw new Error("請求失敗");
      }
      // 解析回應的 JSON 資料
      const result = await res.json();
      setResponse(result);
      console.log("成功收到回應：", result);
    } catch (error) {
      console.error("發生錯誤：", error);
    }
  };
  return (
    <div>
      <h1>提交表單</h1>
      <form onSubmit={handleSubmit}>
        <div>
          <label>姓名：</label>
          <input
            type="text"
            value={name}
            onChange={(e) => setName(e.target.value)}
            placeholder="請輸入姓名"
          />
        </div>
        <div>
          <label>電子郵件：</label>
          <input
            type="email"
            value={email}
            onChange={(e) => setEmail(e.target.value)}
            placeholder="請輸入電子郵件"
          />
        </div>
        <button type="submit">提交</button>
      </form>
      {response && (
        <div>
          <h2>伺服器回應：</h2>
          <pre>{JSON.stringify(response, null, 2)}</pre>
        </div>
      )}
    </div>
  );
}
export default App;

程式碼說明：

1. 狀態管理：使用 useState 來管理表單的輸入值（name 和 email）以及伺服器的回應資料（response）。

2. fetch API：

   • method: 'POST'：指定這是一個 POST 請求。

   • headers：設置 Content-Type 為 application/json，並加入 Authorization 頭。

   • body：將資料物件轉為 JSON 字串。

3. 錯誤處理：檢查回應是否成功（res.ok），並使用 try-catch 處理可能的錯誤。

4. 表單：提供簡單的輸入框讓使用者輸入姓名和電子郵件，並在提交後顯示伺服器的回應。

---

總結

一個 HTTP 請求包含：

1. 請求行：指定方法、路徑和 HTTP 版本。

2. 請求頭：提供額外的元資料，例如 Content-Type、Authorization 等。

3. 請求主體（可選）：傳送資料給伺服器，通常用於 POST 或 PUT 請求。