HTTP Header: Informasi Tambahan di Setiap Request

Header itu seperti label pada paket

Kalau body adalah isi paketnya, maka header adalah label yang ditempel di luar paket: siapa pengirimnya, isinya apa, dan instruksi penanganannya. Header berbentuk pasangan kunci dan nilai, dan ada di request maupun response.

Contoh request dengan beberapa header umum:

GET /api/artikel HTTP/1.1
Host: learn.omnidevv.biz.id
Accept: application/json
Authorization: Bearer abc123token
User-Agent: Mozilla/5.0 ...

Header yang paling sering kamu temui

• Content-Type : format isi body, misalnya application/json atau text/html. Wajib benar saat mengirim data, kalau tidak server bisa salah paham.
• Accept : format yang diinginkan client sebagai balasan. Frontend biasanya meminta application/json.
• Authorization : kredensial akses, misalnya Bearer <token> setelah login. Ini header paling penting di API modern.
• User-Agent : identitas aplikasi pengirim (browser, versi OS).
• Cache-Control : aturan penyimpanan cache, misalnya no-cache agar selalu ambil data baru.
• Content-Length : ukuran body dalam byte, biasanya diisi otomatis.

Server juga bisa mengirim header custom, biasanya diawali X-, misalnya X-RateLimit-Remaining untuk info sisa kuota (dibahas di modul rate limit).

Mengirim dan membaca header di fetch

const res = await fetch("https://learn.omnidevv.biz.id/api/profil", {
  headers: {
    "Authorization": "Bearer abc123token",
    "Accept": "application/json",
  },
});

// membaca header dari response
const tipe = res.headers.get("Content-Type");
console.log(tipe); // misalnya "application/json; charset=utf-8"

Perhatikan: tidak semua header response bisa dibaca JavaScript di browser. Server harus mengizinkannya secara eksplisit lewat header Access-Control-Expose-Headers. Kalau res.headers.get(...) mengembalikan null padahal headernya ada, kemungkinan besar ini penyebabnya.

Header response yang perlu kamu kenal

Dari sisi response, beberapa header ini sering muncul dan berguna:

• Content-Type : tetap penting di response. Selalu cek sebelum memanggil res.json(); kalau server mengembalikan halaman error HTML, parsing JSON-nya akan gagal.
• Set-Cookie : cara server menitipkan cookie ke browser, misalnya session id setelah login.
• Location : dipakai bersama status redirect 3xx, berisi URL tujuan pengalihan.
• Cache-Control dan ETag : pasangan pengatur cache. ETag adalah "sidik jari" versi resource; browser bisa bertanya "apakah versi ini masih sama?" tanpa mengunduh ulang seluruh konten.

Catatan teknis: Header Access-Control-Allow-Origin dan kawan-kawannya adalah urusan CORS, dan semuanya ditentukan oleh server. Kalau browser memblokir request-mu dengan error CORS, tidak ada header yang bisa kamu tambahkan dari sisi frontend untuk mengakali. Solusinya selalu di server: izinkan origin-mu, atau minta backend menyediakan proxy.