Mengenal CORS Preflight Request (OPTIONS): Kenapa API Ditembak Dua Kali?

Misteri Request Ganda di Tab Network

Saat kamu menekan tombol "Simpan Profil" di website React (Frontend), kamu memanggil fungsi axios.put('api/profil'). Namun, jika kamu jeli dan membuka Inspect Element tab Network, kamu akan melihat ada DUA aktivitas pengiriman jaringan ke server.

1. Permintaan pertama menggunakan tipe OPTIONS (Status 204 No Content).
2. Permintaan kedua barulah tipe PUT yang asli.

Banyak pemula kebingungan dan mengira Frontend mereka error atau salah merender (*re-render*). Padahal, *request* pertama itu adalah prosedur keamanan wajib yang disebut CORS Preflight Request.

Apa itu Preflight Request? (Tembakan Peringatan)

Seperti yang kita bahas sebelumnya, CORS adalah penjaga keamanan Browser. Jika *Frontend* (toko.com) ingin menembak *Backend* (api.toko.com), Browser harus memastikan bahwa *Backend* tersebut memberikan izin tertulis.

Jika tembakan API-mu berbahaya (seperti PUT, DELETE, atau membawa data rahasia JSON di *Header*), Browser Chrome/Safari tidak berani langsung menembakkan data aslinya karena takut server *Backend* telanjur menghapus datanya padahal belum tentu diizinkan.

Karena itu, Browser mengirim "Tembakan Kosong" (Ping/Peringatan) ke server menggunakan HTTP Method bernama OPTIONS.

Skenario Obrolan Preflight

• Browser (OPTIONS): "Hei Server, saya web Frontend ingin menembakmu pakai method PUT dan mengirim Header rahasia Token. Apakah kamu mengizinkan saya?"
• Server (Response 200/204): "Oh, silakan. Saya telah mengizinkan method PUT di aturan CORS saya."

Setelah obrolan keamanan ini disepakati (*Preflight sukses*), barulah Browser melepaskan Tembakan Asli (PUT) yang membawa data profilmu.

Apakah Preflight Membuat Web Lemot?

Ya, karena ada 2 kali perjalanan jaringan (Bolak-balik) sebelum satu tugas selesai. Namun jangan khawatir, Browser sangat cerdas. Browser akan me-cache (mengingat) hasil *Preflight* tersebut selama beberapa jam ke depan (menggunakan Header Access-Control-Max-Age). Jadi, tembakan API kedua, ketiga, dan seterusnya tidak akan lagi diribetkan oleh interogasi *Preflight* OPTIONS ini.