Pengulangan Skenario: URL Adalah Peta Anda - Tapi Anda Masih Membutuhkan Paspor dan Barang Bawaan
Artikel ini menyelami anatomi URL dan memecah elemen permintaan API, termasuk header, body, cookie, dan otorisasi, menggunakan analogi mal perbelanjaan untuk menggambarkan fungsinya dan interaksinya.
Kali ini, kita akan mempelajari URL berikut:
https://alice:1234@shop.example.com:8080/products/sneakers?color=red&size=42#reviews
String kecil ini seperti peta navigasi ke mal perbelanjaan, memberi tahu server:
- Terowongan mana yang Anda gunakan (
https
) - Siapa Anda (
alice
— meskipun metode ini tidak begitu aman saat ini) - Mal mana yang akan Anda kunjungi (
shop.example.com
) - Pintu masuk mana yang akan Anda gunakan (
8080
) - Bagian mana yang akan Anda tuju (
/products/sneakers
) - Permintaan khusus apa yang Anda miliki (merah, ukuran 42)
- Dan lantai atau rak mana yang ingin Anda langsung tuju (
#reviews
)
Jadi ya — URL adalah jadwal perjalanan Anda, rencana "cara sampai di sana".
Tapi mengetahui tujuan Anda tidak cukup. Jika Anda pergi berbelanja sepatu, Anda masih perlu membawa keranjang belanja, ID, dan daftar belanja agar perjalanan berhasil.
Header, Body, Cookie, dan Auth? Mereka Adalah Dokumen Perjalanan dan Kebutuhan Anda

Nama | Pikirkan sebagai… | Apakah ada di URL? | Contoh |
---|---|---|---|
Path | Tujuan Anda di peta | ✅ Ya | /products/sneakers : lorong sepatu |
Params | Berteriak "Ini yang saya inginkan!" | ✅ Ya | ?color=red&size=42 : merah, ukuran 42 |
Headers | Paspor & kartu bahasa Anda | ❌ Tidak | Accept: application/json |
Auth | Lencana akses VIP | ❌ Tidak (di Header) | Authorization: Bearer abc123token |
Body | Isi koper Anda | ❌ Tidak | Form pemesanan, unggahan file, alamat pengiriman |
Cookie | Catatan lengket dari kunjungan terakhir | ❌ Tidak | Cookie: session_id=xyz789 |
Petak Memori Cepat:
- URL = Peta jalan Anda
- Headers = ID + "cara saya bersikap"
- Auth = Lencana pemeriksaan keamanan
- Body = Semua barang yang Anda bawa
- Cookie = Catatan lengket dari perjalanan terakhir
Sekarang Anda bisa melihat sekalipun:
Apa yang publik (di URL), dan apa yang disembunyikan di ransel permintaan Anda.
Mari kita buka masing-masing barang perjalanan ini untuk melihat bagaimana semua ini bekerja sama dalam perjalanan HTTP.
1️⃣ Header|Kartu Selamat Datang Anda di Meja Depan
Header seperti kartu yang Anda serahkan saat memasuki hotel. Ini memberi tahu staf:
- Siapa Anda
- Bahasa apa yang Anda bicarakan
- Format apa yang Anda terima
- Apakah Anda VIP (melalui token)
Tidak ada dari ini ada di URL—semuanya bepergian diam-diam bersama permintaan Anda.
Contoh Permintaan
GET /products/sneakers HTTP/1.1
Host: shop.example.com
Accept: application/json
User-Agent: Mozilla/5.0
Authorization: Bearer abc123token
Semua di bawah ini adalah header:
Host: shop.example.com
Accept: application/json
User-Agent: Mozilla/5.0
Authorization: Bearer abc123token
Pembongkaran Header:
Header | Apa yang Diberitahu Server |
---|---|
Host |
“Saya mencari shop.example.com” |
Accept |
“Kirim respons dalam JSON, ya” |
User-Agent |
“Saya menggunakan Chrome di macOS” |
Authorization |
“Saya memiliki token akses yang valid—biarkan saya masuk” |
Apa yang Bukan Header?
GET /products/sneakers HTTP/1.1
Baris ini adalah Baris Permintaan, bukan header. Ini berisi:
[Metode HTTP] [Path Sumber Daya] [Versi HTTP]
GET
→ apa yang ingin Anda lakukan/products/sneakers
→ apa yang Anda mintaHTTP/1.1
→ bahasa yang Anda bicarakan
Lebih tentang metode HTTP
Pengulangan
Anda masuk ke toko dan berkata:
- Baris Permintaan: “Saya ingin membeli sepatu sneaker, silakan.”
- Header: “Ini ID saya (Otorisasi), saya berbicara dalam bahasa Inggris (Terima), dan saya menggunakan ponsel saya (User-Agent).”
2️⃣ Body|Apa yang Benar-benar Ada di Dalam Koper Anda
Body adalah tempat Anda memasukkan konten nyata dari permintaan Anda.
Digunakan dalam metode seperti POST
, PUT
, atau PATCH
, ini adalah cara Anda mengirim formulir, mengirim data, atau mengunggah gambar.
Contoh
POST /checkout HTTP/1.1 ← Baris Permintaan
Content-Type: application/json ← Header Permintaan
{ ← Body Permintaan
"productId": "sneakers123",
"quantity": 2,
"address": "New York Big Apple 1306 Blvd APT 8"
}
Blok JSON itu adalah Body—lembar pesanan “liter” Anda.
Ini bersih, tersimpan jauh dari URL, dan jauh lebih aman.
Header Permintaan:Content-Type seperti daftar kemasan Anda
Tipe | Makna |
---|---|
application/json |
Format data API standar |
application/x-www-form-urlencoded |
Form web tradisional |
multipart/form-data |
Unggahan file atau formulir kompleks |
Pengulangan
Bagian | Konten | Penjelasan |
---|---|---|
Baris Permintaan | POST /checkout HTTP/1.1 |
Memberi tahu server apa yang Anda lakukan dan di mana Anda pergi |
Header Permintaan | Content-Type: application/json |
Memberi tahu server: “Hei, barang yang saya kirim dalam format JSON” |
Body Permintaan | Data JSON | Berisi informasi terperinci yang Anda kirim — seperti pesanan lengkap Anda |
Anda mendekati kasir dan berkata:
“Saya ingin membeli 2 pasang sepatu sneakers123. Kirim ke New York, Big Apple…”
3️⃣ Cookie|Catatan Lengket yang Anda Lupakan Anda Tinggalkan
Cookie seperti catatan lengket yang server tinggalkan untuk browser Anda.
Kali berikutnya Anda mengunjungi, browser membawanya tanpa Anda melakukan apa pun.
Contoh
Cookie: session_id=abc987xyz; theme=dark; cart_id=12345
Isi Cookie
Kunci | Nilai | Artinya |
---|---|---|
session_id |
abc987xyz | Sesi login Anda |
theme |
dark | Anda menyukai mode gelap |
cart_id |
12345 | Keranjang Anda sebelumnya |
Bagaimana Cookie Bekerja
Dari saat itu, browser Anda secara otomatis menyertakannya dengan setiap permintaan:
Cookie: session_id=abc987xyz
Setelah Anda login, server mengirimkan:
Set-Cookie: session_id=abc987xyz; Path=/; HttpOnly
Pengulangan Cepat tentang Cookie
Fitur | Deskripsi |
---|---|
Disimpan di klien | Browser Anda menyimpannya secara otomatis |
Diatur oleh server | Dikirim melalui header respons Set-Cookie |
Persisten di antara permintaan | Dikirim dengan setiap permintaan ke domain yang sama — hingga kadaluwarsa atau dihapus |
Isolasi domain | Cookie tidak bisa lintas domain — menjaga data Anda pribadi dan aman |
Pengulangan
Pikirkan seperti ini: kali terakhir Anda mengunjungi toko, staf memberi Anda tanda terima. Hari ini, Anda kembali, dengan santai menunjukkan tanda terima (browser Anda yang melakukannya secara otomatis), dan staf segera tahu:
- Oh hei, Anda telah login (
session_id
) - Anda menyukai mode gelap (
theme
) - Dan ya, sepatu Anda masih ada di keranjang (
cart_id
)
Anda tidak mengatakan apa-apa — tapi sistem mengingat semuanya. Itulah keajaiban Cookie.
Cookie adalah cara situs web mengingat Anda. Mereka seperti catatan lengket yang server berikan kepada Anda laagi — rahasia kecil antara Anda dan server (meskipun browser Anda sepenuhnya tahu ).
4️⃣ Otorisasi|Lencana VIP Anda ke Lounge Backend
Otorisasi adalah Header khusus untuk titik akhir yang dilindungi.
Kadaluarsa: Autentikasi Dasar (nama pengguna:kata sandi di URL)
https://alice:1234@shop.example.com
Pernah umum, pendekatan "Hai, saya Alice dan ini kata sandi saya" ini jarang digunakan sekarang—terlalu mudah diretas.
Cara Modern: Token Bearer
Authorization: Bearer abcdefg123456token
Hari ini, kita login sekali, mendapatkan token, dan menggunakan token tersebut untuk permintaan selanjutnya.
Anatomi Header Otorisasi
Authorization:
→ ini adalah permintaan otorisasiBearer
→ "Saya memegang kredensial"abcdefg123456token
→ kata sandi aktual Anda
Aliran Tipikal
- Login → dapatkan token
- Buat permintaan dengan:
Authorization: Bearer abcdefg123456token
Mengapa Ini Hebat
Keuntungan | Mengapa Penting |
---|---|
Mengurangi penggunaan ulang kata sandi | Token menggantikan kata sandi Anda |
Ruang lingkup + Kadaluwarsa | Batasi akses berdasarkan waktu/izin |
Akses universal | Bekerja di seluruh web, mobile, aplikasi desktop |
Pengulangan
Anda mendekati gym. Mereka bertanya:
“Ada kartu keanggotaan Anda?”
Anda menunjukkan lulusan digital Anda:
Authorization: Bearer qwerty987654321token
Mereka memindainya dan berkata: “Selamat datang, Alice! Nikmati latihan Anda. ”
Pengulangan Akhir: Daftar Pemeran Mall API
Komponen | Dalam Analogi Mall | Contoh |
---|---|---|
URL | Peta mal Anda | /products/sneakers?color=red |
Path | Lorong tertentu | /products/sneakers |
Parameter Pertanyaan | Filter produk di rak | ?color=red&size=42 |
Header | Kartu info untuk staf | Accept: JSON , User-Agent: iOS |
Cookie | Catatan lengket dari perjalanan terakhir | session_id=abc123 |
Body | Formulir pesanan Anda | {"product_id":"123",...} |
Autentikasi | Lencana keanggotaan VIP Anda | Authorization: Bearer xyz123 |
Dan itu saja — sekarang Anda mengetahui tujuh karakter kunci dalam perjalanan permintaan API Anda!
Setiap dari mereka memainkan peran unik dalam alam semesta EchoAPI, bekerja sama seperti jaringan komunikasi berminyak baik antara klien dan server. Setelah Anda memahami tujuan mereka dan bagaimana mereka berinteraksi, Anda akan menulis permintaan yang lebih bersih, debug lebih cepat, dan membangun API yang tepat.
Jadi kali berikutnya Anda mengirim permintaan, ambillah jeda dan tanyakan:
“Di mana saya di mall? Apa yang perlu saya bawa?”
Anda mungkin menemukan bahwa dunia API tidak dingin dan kriptik — ini adalah perjalanan yang menyenangkan dan terorganisir dengan baik jika Anda tahu cara mempersiapkan diri!