How HTTP Works: Headers, Status Codes, Caching, dan Cookies

1. Pendahuluan: Kenapa HTTP Masih Penting Banget

Semua aplikasi web—REST API, GraphQL, bahkan WebSocket—berdiri di atas fondasi HTTP.

HTTP bukan cuma protokol request/response, tapi juga pilar penting dalam performa, debugging, dan keamanan web modern.

Analogi: “HTTP adalah bahasa diplomasi antara browser dan server.”

2. HTTP Request dan Response: Anatomi Dasarnya

a. Contoh Struktur HTTP Request

GET /index.html HTTP/1.1
Host: blog.hasanh.dev
User-Agent: Mozilla/5.0
Accept: text/html

b. Contoh Struktur HTTP Response

HTTP/1.1 200 OK
Content-Type: text/html
Content-Length: 1024
Set-Cookie: session_id=abc123; HttpOnly

Komponen Utama:

• Method: GET, POST, PUT, DELETE, PATCH, HEAD, OPTIONS
• URL: alamat yang diminta
• Headers: metadata tambahan
• Body: isi (umumnya pada POST/PUT)

3. Header: Otak dari Protokol HTTP

Header mengontrol bagaimana request dan response diproses.

Jenis Header:

• Request Header: dikirim oleh browser (misal: Accept, Authorization)
• Response Header: dikirim server (misal: Set-Cookie, Cache-Control)
• Entity Header: detail isi (Content-Type, Content-Length)
• General Header: metadata umum

Analogi: “Header adalah amplop yang menjelaskan isi surat.”

Header Penting:

• Content-Type, Accept
• Authorization
• Cache-Control, ETag, Expires
• Set-Cookie, Cookie, SameSite

4. Status Code: Bahasa Isyarat Server

Kategori:

• 1xx: Informasional
• 2xx: Sukses (200 OK, 201 Created, 204 No Content)
• 3xx: Redirect (301, 302, 307)
• 4xx: Kesalahan dari sisi client (400, 401, 403, 404)
• 5xx: Kesalahan server (500, 502, 504)

Tips Debugging Cepat:

• 404? Cek URL dan routing.
• 401/403? Cek autentikasi/otorisasi.
• 500+? Cek server log!

5. Caching di HTTP: Boost Speed, Kurangi Beban

Caching membantu mempercepat respon dan mengurangi beban server.

Direktif Cache-Control:

• no-store: jangan simpan cache sama sekali
• no-cache: simpan tapi harus revalidate
• public, private: kontrol siapa yang boleh cache

Kombinasi Efektif:

• ETag + If-None-Match
• Last-Modified + If-Modified-Since

Strategi Cache:

• API: Cache-Control: no-store
• Static: Cache-Control: public, max-age=31536000

Gunakan DevTools > Network untuk cek header cache!

6. Cookies: Identitas & Sesi di Web

Cookies adalah penyimpan data kecil (key-value) yang dikirim browser ke server.

Digunakan untuk:

• Login session
• Tracking
• CSRF protection

Atribut Penting:

• HttpOnly: tidak bisa diakses via JavaScript
• Secure: hanya dikirim lewat HTTPS
• SameSite: kontrol lintas domain
• Domain, Path, Max-Age

Perbandingan:

7. Contoh Alur Lengkap: Login Pakai Cookie

1. User kirim POST /login
2. Server validasi, lalu kirim Set-Cookie
3. Browser simpan cookie secara otomatis
4. Request selanjutnya otomatis kirim Cookie header
5. Server mengenali user dari cookie

8. Kesalahan Umum & Best Practice

• Caching terlalu agresif → data tidak up-to-date
• Header diletakkan di tempat yang salah → tidak terbaca
• Cookie login tanpa Secure dan HttpOnly → rentan serangan

9. Kesimpulan

HTTP bukan cuma jembatan, tapi fondasi komunikasi aplikasi web.

Dengan memahami HTTP secara mendalam, kamu bisa:

• Debug lebih cepat
• Bangun sistem lebih aman dan efisien

Praktikkan langsung di proyekmu: buka DevTools, pakai Postman, atau coba curl untuk eksplorasi!