Laravel CORS #2: Konfigurasi CORS pada Laravel - Perwira Learning Center

1. Latar Belakang

    Setelah membahas tentang konsep dasar dari CORS atau Cross-Origin Resource Sharing dan segala pengertian tambahannya, pasti anda merasa penasaran akan bagaimana caranya untuk mengatur kebijakan CORS pada aplikasi kita sendiri dan apa saja yang perlu diperhatikan selama proses pengaturan CORS tersebut. Artikel ini akan membahas tuntas langkah demi langkah untuk mengatur CORS sesuai kebutuhan pengembangan aplikasi milik anda. 

2. Alat dan Bahan

A. Perangkat Lunak

- Sistem Operasi Linux (atau yang lain)

- Composer

- Laravel 12.0

- Visual Studio Code

B. Perangkat Keras

- Laptop / PC

3. Pembahasan

3.1 Pengantar

    Semenjak versi terbaru Laravel, CORS sudah di dukung secara bawaan oleh framework. Artinya, kita tidak perlu menginstall package tambahan lagi untuk mengatur CORS seperti pada versi lama karena laravel sudah menyediakan file konfigurasi khusus yaitu pada file config/cors.php.

    Di dalamnya, developer dapat menentukan domain mana saja yang diperbolehkan mengakses aplikasi, method HTTP apa saja yang diizinkan, header apa saja yang boleh dikirim, serta apakah aplikasi mendukung pengiriman kredensial seperti cookie atau token autentikasi.

3.2 Struktur File config/cors.php 

1. paths

    Menentukan route/endpoint mana yang CORS-nya aktif. "api/*" artinya semua route yang diawali /api/ akan menerapkan aturan CORS. Sedangkan "sanctum/csrf-cookie" didaftarkan di paths agar proses autentikasi Sanctum dari frontend bisa berjalan tanpa diblokir browser.

'paths' => ['api/*', 'sanctum/csrf-cookie'],

2. allowed_methods

    Menentukan HTTP method apa saja yang diizinkan, simbol * artinya semua method diizinkan.

    

- Izinkan semua method:

'allowed_methods' => ['*'],

- Atau izinkan method secara spesifik:

'allowed_methods' => ['GET', 'POST', 'PUT', 'DELETE'],

3. allowed_origins

    Menentukan domain/origin mana yang boleh mengakses backend dimana * artinya semua (atau all), namun ini berbahaya untuk production karena siapapun dapat mengakses apinya.

- Izinkan semua origin:

'allowed_origins' => ['*'],

- Izinkan origin secara spesifik:

'allowed_origins' => ['http://localhost:3000'],

4. allowed_origins_patterns

    Sama seperti allowed_origins, tapi menggunakan pola regex untuk mencocokkan origin agar tidak perlu menuliskannya satu persatu apabila memiliki banyak subdomain. Misalnya mengizinkan semua subdomain dari google.com sekaligus:

'allowed_origins_patterns' =>['^https://.*\.google\.com$'],

5. allowed_headers

    Menentukan HTTP header apa saja yang boleh dikirim oleh frontend dalam request-nya.

- Izinkan semua header:

'allowed_headers' => ['*'],

- Izinkan header secara spesifik:

'allowed_headers' => ['Content-type', 'Authorization'],

6. exposed_headers

    Menentukan header mana dari response backend yang terekspos atau boleh dibaca oleh frontend. Secara default, frontend hanya bisa baca beberapa header standar. Kalau backend mengirim header custom (misalnya X-Total-Count untuk pagination), header itu harus didaftarkan di sini agar bisa dibaca oleh frontend. Namun, defaultnya adalah kosong alias tidak ada yang di ekspos.

'exposed_headers' => [],

7. max_age

    Menentukan berapa lama (dalam detik) hasil preflight request boleh di-cache oleh browser. Preflight adalah request awal yang browser kirim untuk "bertanya izin" sebelum request aslinya. Dengan max_age, browser tidak perlu bertanya ulang setiap saat, cukup sekali lalu hasilnya disimpan selama durasi yang ditentukan.

- Tidak di-cache:

'max_age' => 0,

- Cache selama 1 jam:

'max_age' => 3600,

8. supports_credentials

    Menentukan apakah request boleh menyertakan kredensial seperti cookie, session, atau Authorization header. Pada support_credentials, nilai defaultnya adalah false. Namun jika true, frontend harus ikut menyertakan withCredentials: true di request-nya.

'supports_credentials' => false,

3.3 Peran Middleware CORS dalam Laravel

    Middleware di Laravel itu seperti “penjaga gerbang” yang memeriksa setiap request sebelum masuk ke controller. Jadi, Middleware CORS akan mengecek origin request, membandingkan port yang diizinkan dengan daftar allowed_origins, lalu mengecek method dan header yang digunakan. 

    Apabila sesuai dengan konfigurasi, maka middleware akan menambahkan header Access-Control-Allow-Origin. Nah, dalam konteks CORS, Laravel menggunakan middleware yang bernama HandleCors.

3.4 Cara Konfigurasi CORS Dasar untuk Development

1. Buka terminal untuk publish konfigurasi cors

    Ketik php artisan config:publish cors, maka nanti file cors.php akan muncul di dalam folder config

2. Tambahkan HandleCors di middleware

    Buka folder bootstrap dan klik file app.php, isi bagian withMiddleware dengan handle cors

3. Buka file cors.php

    Dan berikut adalah isi file cors yang dapat digunakan untuk mengatur kebijakan CORS pada aplikasi kita. Setelah mengatur kebijakan CORS, maka data dari backend sudah dapat diakses oleh port manapun.

3.5 Perbedaan Konfigurasi Development dan Production

    Pada tahap pengembangan atau development, konfigurasi CORS biasanya dibuat lebih longgar agar mempermudah testing frontend dan backend. Contohnya, origin seringkali diatur menjadi * (all atau diizinkan semua) karena biasanya developer sering menggunakan banyak port berbeda.

    

    Namun, pada tahap production yang sudah online, konfigurasi CORS dilarang dibiarkan longgar karena untuk mencegah akses API dari domain yang tidak dikenal atau berbahaya. Origin yang dipakai harus dibatasi hanya pada domain resmi aplikasi.

4. Daftar Pustaka

Laravel. (2024). Laravel Cross-Origin Resource Sharing (CORS). Diakses dari: https://laravel.com/docs/12.x/routing#cors

DEV Community. (2024, 6 September). Resolve "Blocked by CORS Policy: No 'Access-Control-Allow-Origin'" in Laravel. Diakses dari: https://dev.to/robertobutti/resolve-blocked-by-cors-policy-no-access-control-allow-origin-in-laravel-kp1