Mengatur CORS (Cross-Origin Resource Sharing) untuk Situs di ServBay

Dalam pengembangan Web modern, aplikasi front-end (biasanya berjalan pada satu domain) sering kali perlu mengakses API backend atau layanan lain (yang mungkin berjalan pada domain atau port berbeda). Aturan same-origin browser secara default memblokir permintaan lintas domain ini demi keamanan. Cross-Origin Resource Sharing (CORS) adalah mekanisme standar yang memungkinkan server mendeklarasikan asal (origin) mana saja yang diizinkan mengakses sumber dayanya, sehingga pertukaran data lintas domain bisa dilakukan dengan aman.

Artikel ini akan memandu Anda untuk dengan mudah mengkonfigurasi dan mengaktifkan CORS untuk situs Anda menggunakan antarmuka ServBay di lingkungan pengembangan Web lokal.

Apa Itu CORS?

Cross-Origin Resource Sharing (CORS) adalah mekanisme berbasis header HTTP yang memungkinkan server menentukan asal (domain, protokol, atau port) mana saja—selain miliknya sendiri—yang boleh memuat sumber dayanya. Saat sebuah halaman web mencoba melakukan permintaan ke server dengan origin berbeda, browser akan melakukan "permintaan HTTP lintas domain." Sesuai kebijakan same-origin, permintaan seperti ini secara default akan diblokir oleh browser. CORS menyediakan jalur komunikasi antara server dan browser untuk memastikan apakah permintaan lintas domain tersebut aman dan diizinkan.

Mengapa Developer Perlu Mengatur CORS?

Saat Anda membangun aplikasi dengan pemisahan frontend dan backend (misal, frontend di app.servbay.demo, backend API di api.servbay.demo), atau frontend perlu mengakses API pihak ketiga, browser akan memblokir permintaan lintas domain ini karena kebijakan same-origin. Konfigurasi CORS dibutuhkan untuk memberitahu browser bahwa server mengizinkan permintaan dari origin frontend Anda, sehingga kendala same-origin dapat diatasi.

Memahami HTTP Response Header Kunci dalam CORS

Ketika server merespons permintaan lintas domain, akan disertakan beberapa response header HTTP seperti Access-Control-*. Browser akan memutuskan apakah permintaan diizinkan berdasarkan nilai dari header ini. Berikut beberapa parameter utama CORS yang dapat Anda atur di ServBay (setara dengan header HTTP berikut):

1. Access-Control-Allow-Origin

   • Fungsi: Header CORS terpenting; menetapkan origin (satu atau lebih domain) yang diizinkan mengakses sumber daya.
   • Nilai:
     • * : Mengizinkan permintaan dari semua domain. Catatan penting: Meski praktis, penggunaan * tidak disarankan di lingkungan produksi karena berisiko keamanan (semua situs bisa mengakses sumber Anda).
     • https://servbay.demo : Hanya mengizinkan permintaan dari origin tertentu ini.
     • https://servbay.demo https://api.servbay.demo : Memungkinkan beberapa origin tertentu; pisahkan dengan spasi.
   • Catatan: Jika permintaan lintas domain mengirimkan Cookie atau informasi otentikasi HTTP (yaitu saat Access-Control-Allow-Credentials: true diaktifkan), maka tidak boleh menggunakan * pada Access-Control-Allow-Origin—wajib digunakan origin spesifik.

2. Access-Control-Allow-Methods

   • Fungsi: Menentukan metode HTTP lintas domain yang diizinkan (misal: GET, POST, PUT, DELETE, OPTIONS).
   • Nilai: Contoh: GET, POST, PUT, DELETE, OPTIONS (dipisahkan koma).
   • Catatan: Untuk "non-simple request" seperti metode PUT atau DELETE, atau permintaan dengan custom header, browser akan mengirim "preflight request" menggunakan metode OPTIONS. Server harus merespons dengan header seperti Access-Control-Allow-Methods. Biasanya, tambahkan OPTIONS dalam daftar metode.

3. Access-Control-Allow-Headers

   • Fungsi: Menentukan custom HTTP request headers yang diizinkan dikirim saat permintaan lintas domain.
   • Nilai: Misal: Content-Type, Authorization, X-Requested-With (pisahkan dengan koma).
   • Catatan: Jika frontend mengirim header selain "simple header" (misal, selain Accept, Accept-Language, Content-Language, dan Content-Type dengan nilai tertentu), browser akan mengirim preflight request dan Anda harus mencantumkan allowed headers secara eksplisit.

4. Access-Control-Allow-Credentials

   • Fungsi: Mengindikasikan apakah permintaan lintas domain boleh mengandung kredensial pengguna seperti Cookie, sertifikat klien SSL, atau autentikasi HTTP.
   • Nilai: true atau false.
   • Catatan: Jika Anda mengatur ke true, sebagaimana dijelaskan, nilai Access-Control-Allow-Origin tidak boleh wildcard (*). Selain itu, kode klien juga harus mengatur flag yang sesuai (seperti xhr.withCredentials = true atau fetch(url, { credentials: 'include' })).

Mengaktifkan dan Mengatur CORS di ServBay

ServBay menyediakan antarmuka grafis intuitif yang memudahkan Anda mengatur CORS untuk setiap situs secara terpisah. Berikut langkah detailnya:

1. Buka ServBay dan masuk ke daftar situs: Jalankan aplikasi ServBay. Pada bilah navigasi samping di sisi kiri, klik menu "Situs". Anda akan melihat daftar semua situs lokal yang telah Anda konfigurasi di ServBay.

2. Pilih situs yang ingin dikonfigurasi CORS-nya: Di daftar situs, cari dan klik nama situs yang ingin Anda aktifkan dan atur CORS-nya untuk membuka halaman konfigurasi.

3. Cari dan aktifkan pengaturan CORS: Pada halaman konfigurasi situs, gulir ke bawah ke bagian "CORS". Secara default, CORS dalam keadaan nonaktif di ServBay. Klik tombol slide di samping bagian ini untuk mengaktifkan. Setelah diaktifkan, opsi pengaturan di bawahnya akan bisa diedit.

4. Atur Access-Control-Allow-Origin: Di kolom input "Access-Control-Allow-Origin", masukkan satu atau beberapa origin (domain) yang diizinkan mengakses sumber daya situs ini. Jika lebih dari satu origin, pisahkan dengan spasi. Contoh: https://frontend.servbay.demo https://anotherapp.servbay.demo. Hindari penggunaan * untuk produksi.

5. Atur Access-Control-Allow-Methods: Pada kolom input "Access-Control-Allow-Methods", masukkan metode HTTP yang diizinkan (pisahkan dengan koma). Contoh: GET, POST, PUT, DELETE, OPTIONS. Pastikan menyertakan semua metode yang akan digunakan aplikasi, dan biasanya tambahkan OPTIONS untuk mendukung preflight request.

6. Atur Access-Control-Allow-Headers: Di kolom input "Access-Control-Allow-Headers", masukkan custom HTTP headers yang boleh dibawa dalam permintaan lintas domain (pisahkan dengan koma). Contoh: Content-Type, Authorization, X-Custom-Header. Hanya cantumkan header yang memang diperlukan oleh aplikasi Anda.

7. Atur Access-Control-Allow-Credentials (opsional): Jika Anda butuh permintaan membawa Cookie atau info autentikasi HTTP, aktifkan tombol slide di samping "Allow-Credentials". Ingat: Jika opsi ini aktif, di langkah 4 nilai Access-Control-Allow-Origin tidak boleh *.

8. Simpan konfigurasi Anda: Setelah semua pengaturan CORS dikonfigurasi, pastikan klik tombol "Simpan" di kanan bawah halaman untuk menerapkan perubahan. ServBay akan memperbarui konfigurasi server Web (misal Caddy atau Nginx) secara otomatis, tanpa perlu restart manual.

Contoh Konfigurasi

Ilustrasi gambar berikut menunjukkan contoh pengaturan CORS di ServBay untuk situs "ServBay Demo Website":

Berdasarkan konfigurasi pada gambar di atas:

• Access-Control-Allow-Origin: https://frontend.servbay.demo https://api.servbay.demo
• Access-Control-Allow-Methods: GET, POST, PUT, DELETE, OPTIONS
• Access-Control-Allow-Headers: Content-Type, Authorization
• Allow-Credentials: Aktif (true)

Ini berarti hanya permintaan dari https://frontend.servbay.demo dan https://api.servbay.demo yang boleh mengakses sumber daya "ServBay Demo Website". Permintaan ini boleh menggunakan metode GET, POST, PUT, DELETE, OPTIONS, boleh membawa header Content-Type dan Authorization, serta diizinkan membawa kredensial seperti Cookie.

Tips, Catatan, & Best Practice

• Keamanan Utama: Untuk kemudahan di pengembangan/testing Anda bisa memakai Access-Control-Allow-Origin: *, namun pastikan di lingkungan produksi dibatasi hanya origin aplikasi Anda untuk meningkatkan keamanan.
• Preflight Request: Memahami cara kerja preflight request (OPTIONS) penting untuk debugging CORS. Pastikan server (lewat konfigurasi ServBay) memberi respons yang benar, terutama pada header CORS.
• Cache Browser: Browser bisa menyimpan kebijakan CORS. Jika ada perubahan dan tetap bermasalah, coba hapus cache browser atau gunakan mode incognito.
• CORS di Aplikasi: Framework seperti Laravel, Express.js, Spring Boot, dsb, memungkinkan konfigurasi CORS di level aplikasi. CORS di ServBay berlaku di level server web (Caddy/Nginx) — umumnya lebih tinggi prioritasnya dibanding di kode aplikasi. Di beberapa kasus kompleks, koordinasikan kedua lapis konfigurasi CORS ini.
• Alat Debug: Gunakan DevTools browser (tekan F12), tab Network, untuk memeriksa header request/response terkait CORS. Ini sangat membantu menemukan sebab kegagalan CORS.

FAQ (Tanya Jawab)

T: Saya sudah mengatur CORS sesuai langkah, tapi request lintas domain tetap gagal?

J: Silakan periksa langkah berikut:

1. Periksa konsol dan tab network di browser: Biasanya error CORS muncul di konsol. Di tab network, cek semua response header, pastikan ada Access-Control-Allow-Origin, Access-Control-Allow-Methods, Access-Control-Allow-Headers dengan nilai yang sesuai permintaan klien.
2. Crosscheck origin: Pastikan alamat origin di Access-Control-Allow-Origin (termasuk protokol, domain, port) benar-benar sama dengan asal permintaan frontend Anda.
3. Cek metode dan header: Pastikan Access-Control-Allow-Methods memuat metode HTTP yang digunakan dan semua custom header yang digunakan diizinkan pada Access-Control-Allow-Headers.
4. Soal kredensial: Jika butuh kirim Cookie atau kredensial lain, pastikan Allow-Credentials sudah aktif di ServBay, dan Access-Control-Allow-Origin BUKAN *. Juga, kode frontend Anda mesti menyetel opsi seperti withCredentials = true.
5. Preflight request: Untuk permintaan non-sederhana, cek apakah browser mengirim preflight OPTIONS, dan server merespons dengan header CORS yang benar.
6. Simpan Konfigurasi: Pastikan setelah mengubah setting di ServBay, Anda sudah klik tombol "Simpan".

T: Bisakah saya membuat kebijakan CORS global untuk semua situs di ServBay?

J: Pengaturan CORS di ServBay bersifat spesifik per-situs, demi fleksibilitas dan keamanan. Saat ini UI ServBay belum menyediakan setting CORS global. Untuk beberapa situs, konfigurasi tetap harus dilakukan satu per satu.

T: Bagaimana cara kerja pengaturan CORS di ServBay?

J: ServBay menggunakan Caddy atau Nginx sebagai server Web. Konfigurasi CORS yang Anda buat lewat UI ServBay akan diubah menjadi instruksi pada file konfigurasi Caddyfile atau Nginx. ServBay akan mengelola file konfigurasi ini dan memuat ulang server apabila diperlukan, tanpa Anda harus mengedit manual.

Ringkasan

Dengan antarmuka ServBay yang intuitif, Anda dapat dengan mudah mengaktifkan dan mengatur CORS untuk situs di lingkungan pengembangan lokal agar masalah lintas domain teratasi. Memahami dan mengonfigurasi header kunci seperti Access-Control-Allow-Origin, Access-Control-Allow-Methods, Access-Control-Allow-Headers, dan Access-Control-Allow-Credentials adalah kunci agar permintaan lintas domain Anda berlangsung aman dan lancar. Ikuti panduan dan tips di atas untuk membantu pengembangan Web lokal Anda menjadi lebih efisien dan bebas dari kendala CORS.