Logo AnabisolutionsAnabisolutions
Aplikasi web

CORS dijelaskan sederhana: kenapa browser memblokir permintaan API Anda

ABTim AnabisolutionsAnalog Bina Solutions2 menit baca
CORS dijelaskan sederhana: kenapa browser memblokir permintaan API Anda

CORS (Cross-Origin Resource Sharing) adalah aturan browser yang menentukan apakah halaman dari satu origin boleh membaca respons dari origin lain. Galat CORS muncul karena server API belum mengizinkan origin tersebut lewat header yang tepat. Solusinya ada di server, bukan di kode frontend.

Apa itu origin dan kenapa CORS ada?

Origin adalah gabungan skema, domain, dan port. Alamat https://app.contoh.com dan https://api.contoh.com dianggap origin berbeda. Browser memakai kebijakan same-origin untuk mencegah situs jahat membaca data akun Anda dari situs lain.

CORS adalah pengecualian terkontrol dari kebijakan itu. Server menyatakan secara eksplisit origin mana yang boleh membaca responsnya.

Bagaimana alur permintaan CORS bekerja?

Untuk permintaan sederhana, browser langsung mengirim lalu memeriksa header respons. Untuk permintaan yang memakai metode seperti PUT atau header khusus, browser lebih dulu mengirim permintaan pratinjau dengan metode OPTIONS (preflight).

  • Access-Control-Allow-Origin: origin yang diizinkan membaca respons.
  • Access-Control-Allow-Methods: metode HTTP yang diizinkan.
  • Access-Control-Allow-Headers: header kustom yang boleh dikirim.
  • Access-Control-Allow-Credentials: izin mengirim cookie, tidak boleh digabung dengan tanda bintang pada origin.

CORS bukan fitur keamanan server

CORS hanya dijalankan browser. Alat seperti curl atau skrip server tetap bisa memanggil API Anda, jadi autentikasi tetap wajib.

Cara mengaturnya dengan aman

Daftarkan origin yang dipercaya secara eksplisit, jangan memakai tanda bintang untuk API yang menggunakan cookie atau token pengguna.

  • Buat daftar putih origin per lingkungan: pengembangan, staging, produksi.
  • Balas permintaan OPTIONS dengan status 204 dan header yang sesuai.
  • Batasi metode dan header hanya yang benar-benar dipakai.
  • Catat permintaan yang ditolak untuk membantu debugging.

Ringkasan dan langkah berikutnya

Saat melihat galat CORS, periksa dulu tab Network pada browser, lihat header respons, lalu ubah konfigurasi di server API.

  • Origin = skema + domain + port.
  • Metode preflight: OPTIONS.
  • Kode status preflight yang umum: 204.
  • Rujukan: dokumentasi CORS di developer.mozilla.org.

Topik terkait yang bisa Anda baca berikutnya: pengantar API-first, autentikasi login aplikasi web, OWASP Top 10 untuk aplikasi bisnis, dan JWT atau session cookie.

Kesalahan yang perlu dihindari

Kesalahan umum adalah memasang Access-Control-Allow-Origin dengan tanda bintang di produksi demi cepat selesai, atau memakai ekstensi browser yang mematikan CORS lalu lupa memperbaiki server. Jangan pula memantulkan header Origin dari permintaan tanpa memeriksa daftar putih.

Pertanyaan singkat seputar topik ini

Apa penyebab galat CORS?

Server API belum mengizinkan origin halaman Anda lewat header Access-Control-Allow-Origin. Perbaikannya dilakukan di server, bukan di kode frontend.

Apakah CORS melindungi API dari semua serangan?

Tidak. CORS hanya dijalankan browser. Skrip server atau curl tetap dapat memanggil API, jadi autentikasi dan otorisasi tetap wajib.

Mau kami bantu menimbang?Ceritakan alur Anda, kami beri pendapat jujur dalam 1×24 jam kerja.
Konsultasi gratis

Pertanyaan yang sering muncul

Ya, tanpa komitmen. Kami balas dalam 1×24 jam kerja.

Suka artikel ini?
AB

Tentang Tim AnabisolutionsStudio digital dari Pekanbaru yang mengerjakan website, aplikasi, dan sistem untuk klien di Riau dan sekitarnya.

Topik:CORSAPIKeamanan web

Artikel menarik lainnya

Apa kata klien kami

Sangat profesional. Hasilnya melebihi ekspektasi dan komunikasi selama proyek lancar.
Logo LelangbankBudi SantosoPlatform lelang, Lelangbank
Tim yang kompeten. Custom plugin WordPress-nya pas sekali dengan kebutuhan kami.
Logo Ruang Multi TalentSarah WijayaSitus lembaga pelatihan, Ruang Multi Talent
Kualitas kode bersih dan support after sales luar biasa. Pasti kembali lagi.
Logo QuipworkAhmad RahmanDashboard internal, Quipwork

Punya masalah serupa? Ceritakan.

Konsultasi awal gratis dan tanpa komitmen. Kami balas dalam 1×24 jam kerja.

hello@anabisolutions.comJalan Nurul Yaqin No. 1, Pekanbaru, Riau, Indonesia
Chat via WhatsApp

Mulai dari satu pesan

Gratis dan tanpa komitmen.

Anda butuh apa?
Kami balas dalam 1×24 jam kerja.

Situs ini dilindungi reCAPTCHA dan berlaku Kebijakan Privasi serta Persyaratan Layanan Google.