headerrequestcontent-typeMenengah4 mnt baca

Header Request: Informasi yang Dikirim Client

Header penting di sisi request: Content-Type, Authorization, Accept, User-Agent, dan cara membacanya.

Amplop surat dan perangko

Kalau body adalah isi surat, header adalah amplopnya: alamat pengirim, alamat tujuan, perangko, dan stempel "segera". Header adalah pasangan kunci-nilai yang menempel di request atau response, memberi konteks tanpa menjadi isi utama.

Kenapa header harus ada

Bayangkan server menerima body JSON tapi tidak tahu itu JSON, gambar, atau teks biasa. Atau server tidak tahu bahasa yang diinginkan user. Header menyelesaikan semua "info tambahan" ini dengan format standar, sehingga server dan klien tidak perlu menebak-nebak.

Contoh 1: header yang selalu kamu kirim

http
GET /api/produk HTTP/1.1
Host: toko.contoh.id
Accept: application/json
Accept-Language: id
User-Agent: Mozilla/5.0 (Windows NT 10.0)
Authorization: Bearer abc123
  • Host: server tujuan (wajib di HTTP/1.1).
  • Accept: format response yang diinginkan klien.
  • Accept-Language: bahasa yang diinginkan (id = Indonesia).
  • User-Agent: identitas aplikasi pengirim (browser, versi OS).
  • Authorization: bukti identitas (dibahas tuntas di modul auth).

Contoh 2: header saat mengirim data

http
POST /api/produk HTTP/1.1
Host: toko.contoh.id
Content-Type: application/json
Content-Length: 48

{"nama": "Kopi Susu", "harga": 18000}
  • Content-Type: format body yang dikirim. Ini yang paling sering bikin error kalau lupa diset.
  • Content-Length: ukuran body dalam byte, agar server tahu kapan body selesai dibaca.

Perhatikan pasangan simetrisnya: Accept = "saya mau menerima format X", Content-Type = "saya mengirim format X". Tertukar keduanya adalah kesalahan klasik.

Kesalahan umum

Salah: lupa Content-Type saat POST JSON. Server menerima body tapi tidak tahu cara mem-parse-nya. Yang benar: selalu sertakan Content-Type: application/json untuk body JSON.

Salah: menaruh data besar di header kustom. Header bukan tempat data; sebagian server menolak header lebih dari 8 KB. Yang benar: data besar lewat body atau query.

Salah: mengira header kustom bebas nama apa pun. Boleh, tapi konvensinya pakai awalan X-, misalnya X-Request-Id. Yang benar: ikuti konvensi agar tidak bentrok dengan header standar di masa depan.

Header yang wajib dihafal

Lima header request yang akan kamu temui tiap hari:

  1. Host: tujuan request (wajib di HTTP/1.1).
  2. Content-Type: format body yang dikirim.
  3. Authorization: bukti identitas (Bearer/Basic/ApiKey).
  4. Accept: format response yang diinginkan.
  5. User-Agent: identitas aplikasi pengirim.

Hafalkan kelimanya beserta pasangannya di response (Content-Type response, WWW-Authenticate untuk 401). Dengan lima ini kamu bisa membaca 90% request mentah di tab Network tanpa bantuan.

Catatan teknis: Header tidak case-sensitive (content-type sama dengan Content-Type), tapi tulis dengan kapitalisasi standar agar enak dibaca. Di HTTP/2 dan HTTP/3 header dikompresi otomatis (HPACK/QPACK), jadi banyak header tidak lagi semahal dulu.

Tantangan

Kirim header custom dan baca echo-nya

https://httpbin.org/headers mengembalikan JSON berisi semua header yang kamu kirim. Tulis kode fetch ke URL itu dengan header:

  • X-Belajar: HTTP
  • Accept-Language: id-ID

Cetak response JSON-nya dan pastikan kedua header muncul di sana. Lalu jawab: kenapa header X-Belajar diawali X-? Apakah itu wajib?

<!doctype html>
<html>
<head>
<meta charset="utf-8" />

</head>
<body>
<h1>Halo JS</h1>
<p>Buka console preview untuk melihat output.</p>
<script src="index.js"></script>
</body>
</html>
Open on CodeSandboxOpen Sandbox