Laravel CORS #1: Konsep Dasar CORS - Perwira Learning Center

1. Latar Belakang

    Pernahkah Anda mencoba menghubungkan aplikasi frontend dengan backend yang memiliki origin berbeda, lalu tiba-tiba muncul pesan “Blocked by CORS Policy” di console browser? Padahal server sudah berjalan dengan baik dan API dapat diakses melalui Postman. Mengapa ketika diakses melalui browser, justru ditolak atau diblokir? Pada pembahasan kali ini, kita akan mengulik lebih dalam tentang alasan terjadinya pemblokiran tersebut oleh Same-Origin Policy yang menampilkan error CORS.

2. Pembahasan

2.1 Pengertian CORS

    CORS atau Cross-Origin Resource Sharing adalah fitur keamanan yang mengatur origin mana saja yang boleh mengakses resource server, sehingga akses dari origin yang tidak diizinkan akan diblokir oleh browser. Misalnya pada konsep backend dan frontend. 

    Apabila masing-masing dari kedua aplikasi memiliki domain yang berbeda namun frontend harus tetap mengambil data dari backend, maka server backend harus menyediakan CORS agar data-datanya dapat diambil oleh frontend tanpa diblokir browser (kebijakan Same-Origin Policy).

2.2 Pengertian Origin dalam Web

    Origin adalah identitas asal sebuah halaman atau server dimana Browser menggunakan origin untuk membedakan satu alamat dengan alamat lainnya. 

Browser menentukan origin dari 3 hal, yaitu:

1. Protocol

    Protocol (sering disebut scheme) adalah aturan dasar atau metode yang digunakan oleh browser untuk berkomunikasi dengan server web. Terdapat 2 protokol yang paling umum:

a. HTTP (HyperText Transfer Protocol) - 80

    Protokol yang mengirim data secara polos tanpa enkripsi, sehingga data yang dikirim berpotensi dapat dibaca oleh pihak lain yang menyegat koneksi di tengah jalan. Namun HTTP lebih ringan dan simpel sehingga cocok untuk development lokal atau testing.

b. HTTPS (HTTP + Enkripsi) - 443

    versi aman dari HTTP yang dilengkapi enkripsi. Data yang dikirim akan diacak terlebih dahulu, sehingga meskipun berhasil disegat, isinya tidak dapat dibaca.

2. Hostname

    Hostname adalah nama lengkap alamat server yang dituju, mencakup subdomain dan domain utama. Misalnya:

- drive.google.com : subdomain

- google.com : domain utama

3. Port

    Port adalah angka yang menentukan pintu mana yang dituju ketika mengakses sebuah server.

2.3 Same-Origin dalam Web

    Secara standar, browser biasanya memblokir permintaan lintas domain karena terdapat kebijakan Same-Origin Policy (SOP) yang dirancang untuk mencegah serangan keamanan. Kebijakan ini adalah fitur keamanan mendasar yang mencegah halaman web untuk membuat permintaan ke domain yang berbeda kecuali jika cocok.

2.4 Bagaimana CORS Bekerja

    Untuk memahami cara kerja CORS, kita ikuti alur yang terjadi ketika frontend meminta data ke backend. Bayangkan terdapat dua aplikasi yang berjalan pada 2 origin berbeda:

• Frontend (React) → http://localhost:5173
• Backend (Laravel) → http://localhost:8000

Alur yang akan terjadi adalah sebagai berikut.

1. Frontend mengirim request

    Pada tahap ini, react mengirim request ke laravel untuk mengakses suatu data api, misalnya:

GET http://localhost:8000/api/users

    Request ini tidak dikirim langsung oleh React, melainkan dikirim melalui browser sehingga di sinilah browser mulai menerapkan aturan keamanannya.

2. Backend Mengirim Response Header

    Laravel menerima request tersebut. Jika CORS sudah dikonfigurasi dengan benar, Laravel akan menyertakan header berikut dalam response-nya:

Access-Control-Allow-Origin: http://localhost:3000

    Header ini tandanya telah mengizinkan origin tersebut untuk mengakses data/sumber daya (resource) pada laravel. Jika server tidak mengirim header ini, browser langsung memblokir response-nya.

3. Browser Mengecek Izin

    Setelah menerima response dari server, browser tidak langsung meneruskan data ke React namun browser akan mengecek dulu:

• Apakah origin frontend sesuai dengan yang diizinkan?
• Apakah method yang dipakai diizinkan?
• Apakah header yang dipakai diizinkan?

    Kalau semua cocok, maka data dapat diteruskan ke React. Kalau tidak, akan muncul error CORS di bagian console.

Contoh Gambaran CORS

2.5 Ilustrasi Sederhana Perbedaan Origin

a. Origin Sama (Same-Origin)

https://example.com:443/page1 dan https://example.com:443/page2

    Ini dianggap sama karena protokol sama (https), domain sama (example.com), dan port sama (443).

b. Origin Tidak Sama (Cross-Origin)

http://example.com/page1 dan https://example.com/page2 

    Dianggap tidak sama karena protokol berbeda (http dan https) meski domain tetap sama.

3. Daftar Pustaka

CODE POLITAN. (2024, 7 November). Apa itu CORS? Panduan Lengkap untuk Pemula Dalam Pengembangan Web. Diakses dari: https://www.codepolitan.com/blog/apa-itu-cors-panduan-lengkap-untuk-pemula-dalam-pengembangan-web/

Medium. (2024, 30 September). Memahami Kebijakan Same-Origin (SOP) dan CORS: Panduan Komprehensif untuk Keamanan Web. Diakses dari: https://medium.com/@piyushsingh0992/understanding-same-origin-policy-sop-and-cors-a-comprehensive-guide-to-web-security-4bd54e2a0fec