Mission 3: req.body และ req.headers

เป้าหมายของ Mission นี้: เข้าใจ req.body และ req.headers ให้ครบ แล้วสรุปกฎว่าเมื่อไหร่ ใช้ช่องทางไหน

---

1. Learning Objective

จบ Mission นี้คุณจะ

• อธิบายได้ว่า req.body รองรับข้อมูลรูปแบบไหนบ้าง
• อ่านค่าจาก req.headers ได้
• เลือกได้ทันทีว่าข้อมูลชิ้นหนึ่งควรส่งมาทาง params, query, body, หรือ header

---

2. Diagram — 4 ช่องทาง เห็นพร้อมกันในภาพเดียว

POST /books/7?notify=true HTTP/1.1        <-- (1) params: 7   (2) query: notify=true
Host: localhost:3000
Content-Type: application/json            <-- (3) headers
Authorization: Bearer eyJhbGciOi...

{                                          <-- (4) body
  "title": "1984",
  "author": "George Orwell"
}

flowchart LR
    R["HTTP Request"] --> P["req.params<br/>ชิ้นไหน"]
    R --> Q["req.query<br/>แบบไหน"]
    R --> H["req.headers<br/>ข้อมูลกำกับ / ตัวตน"]
    R --> B["req.body<br/>เนื้อข้อมูล"]
    style P fill:#1e3a5f,stroke:#38bdf8,color:#fff
    style Q fill:#3f2d5c,stroke:#a855f7,color:#fff
    style H fill:#5c4d2d,stroke:#eab308,color:#fff
    style B fill:#14532d,stroke:#22c55e,color:#fff

---

3. ตารางตัดสินใจ — จำแค่ตารางนี้ตารางเดียว

+-------------+-------------------------+---------------------+----------------------+
| ช่องทาง       | ใช้เมื่อ                   | มองเห็นใน URL ไหม     | ตัวอย่าง               |
+-------------+-------------------------+---------------------+----------------------+
| req.params  | ระบุว่าเป็นชิ้นไหน           | เห็น                 | /books/7             |
| req.query   | เงื่อนไขเสริม กรอง/เรียง      | เห็น                 | ?sort=year&page=2    |
| req.body    | ข้อมูลที่จะบันทึก/แก้ไข        | ไม่เห็น               | {"title": "1984"}    |
| req.headers | ข้อมูลกำกับ / ตัวตน / รูปแบบ  | ไม่เห็น               | Authorization: ...   |
+-------------+-------------------------+---------------------+----------------------+

กฎเหล็ก 3 ข้อ

ข้อ 1 — ข้อมูลลับห้ามอยู่ใน URL เด็ดขาด

❌ GET /login?username=somchai&password=123456

เพราะ URL จะถูกเก็บไว้ใน: ประวัติเบราว์เซอร์, log ของเซิร์ฟเวอร์, log ของ proxy, Referer header ที่ส่งต่อไปเว็บอื่น — รหัสผ่านจะกระจายไปทุกที่

✅ POST /login  +  body: { "username": "somchai", "password": "123456" }

ข้อ 2 — GET ไม่มี body (ทบทวนจาก Chapter 1) เงื่อนไขของ GET ต้องไปอยู่ใน query

ข้อ 3 — Token ไปกับ header ไม่ใช่ body เพราะทุก Request ต้องแนบไป จะยัดใส่ body ทุกครั้งก็ไม่ได้ (GET ไม่มี body) → Backend Explorer 2 Chapter 5 จะใช้จริง

---

4. Live Coding — req.body ให้ลึกขึ้น

express.json() ทำงานเมื่อไหร่บ้าง

app.use(express.json());

Middleware ตัวนี้จะแกะ body เฉพาะเมื่อ Header Content-Type เป็น application/json เท่านั้น ถ้าส่งมาแบบอื่นจะไม่ทำอะไรเลย และ req.body จะเป็น {} ว่างเปล่า

รูปแบบ body ที่พบบ่อย

Content-Type	ใช้ตอนไหน	ต้องเปิด middleware อะไร
application/json	API ทั่วไป (คอร์สนี้ใช้ตัวนี้)	express.json()
application/x-www-form-urlencoded	ฟอร์ม HTML แบบดั้งเดิม	express.urlencoded({ extended: true })
multipart/form-data	อัปโหลดไฟล์	ต้องใช้ library เสริม เช่น multer

เปิดพร้อมกันได้ทั้งสองแบบ ไม่ตีกัน

app.use(express.json());
app.use(express.urlencoded({ extended: true }));

จำกัดขนาด body (ควรทำในระบบจริง)

app.use(express.json({ limit: "1mb" }));

ถ้าไม่จำกัด ใครส่ง body ขนาด 500MB มาก็ทำให้เซิร์ฟเวอร์ล่มได้

---

5. Live Coding — req.headers

app.get("/debug", (req, res) => {
  console.log(req.headers);

  res.json({
    userAgent: req.headers["user-agent"],       // เบราว์เซอร์อะไร
    contentType: req.headers["content-type"],   // ส่งข้อมูลมาแบบไหน
    auth: req.headers["authorization"],         // Token (Backend Explorer 2 Chapter 5)
    custom: req.headers["x-api-key"],           // header ที่เราตั้งเอง
  });
});

กฎของ headers ที่ต้องรู้

1. ชื่อ header เป็นตัวพิมพ์เล็กทั้งหมดเสมอ ใน Express — แม้ Client จะส่งมาเป็น Content-Type ก็ต้องอ่านด้วย req.headers["content-type"]
2. ใช้ [] ไม่ใช่ . เพราะชื่อ header มีขีดกลาง (req.headers.content-type เป็น syntax error)
3. header ที่เราตั้งเอง นิยมขึ้นต้นด้วย x- เช่น x-api-key

---

6. ตัวอย่างครบทั้ง 4 ทางในเส้นเดียว

// PUT /books/7?notify=true
// Header: x-user-role: admin
// Body:   { "title": "1984" }
app.put("/books/:id", (req, res) => {
  const id = Number(req.params.id);              // 7        <- ชิ้นไหน
  const notify = req.query.notify === "true";    // true     <- ตัวเลือกเสริม
  const role = req.headers["x-user-role"];       // "admin"  <- ตัวตน
  const { title } = req.body;                    // "1984"   <- ข้อมูลที่จะบันทึก

  if (role !== "admin") {
    return res.status(403).json({ error: "ต้องเป็น admin เท่านั้น" });
  }
  // ...
});

สังเกต req.query.notify === "true" — query เป็น string เสมอ ดังนั้น "false" ก็ยัง truthy! ต้องเทียบกับข้อความ "true" ตรงๆ ไม่ใช่เขียน if (req.query.notify)

---

7. Common Mistakes

ปัญหา	สาเหตุ	วิธีแก้
req.body เป็น {}	Content-Type ไม่ใช่ application/json	ตั้ง Header ให้ถูกตอนยิงทดสอบ
req.headers.content-type พัง	ชื่อมีขีดกลาง	ใช้ req.headers["content-type"]
อ่าน req.headers["Authorization"] ไม่ได้	ต้องเป็นตัวพิมพ์เล็ก	req.headers["authorization"]
?notify=false แล้วยังทำงาน	string "false" เป็น truthy	เทียบ === "true"
ส่งรหัสผ่านผ่าน query	ข้อมูลลับรั่วเข้า log/history	ใช้ POST + body เสมอ
ส่ง body ไปกับ GET แล้วอ่านไม่ได้	GET ไม่มี body ตามมาตรฐาน	ย้ายไปใช้ query
ฟอร์ม HTML ส่งมาแล้ว body ว่าง	ฟอร์มส่งเป็น urlencoded ไม่ใช่ json	เพิ่ม express.urlencoded()

---

8. Summary

• 4 ช่องทาง: params (ชิ้นไหน) / query (แบบไหน) / body (เนื้อข้อมูล) / headers (ข้อมูลกำกับ)
• params และ query มองเห็นใน URL → ห้ามใส่ความลับ
• body ต้องมี express.json() และ Header Content-Type ที่ถูกต้อง
• headers ชื่อเป็น ตัวพิมพ์เล็ก และอ่านด้วย []
• ค่าจาก params, query, headers เป็น string เสมอ