Memahami CORS Proxy / API Proxy dan Mengatasi Masalah Cross-Origin

Solusi perantara untuk tantangan permintaan lintas origin dalam pengembangan web.

Apa itu CORS?

CORS (Cross-Origin Resource Sharing) adalah standar keamanan browser modern yang mengatur bagaimana skrip pada sebuah halaman web dapat meminta sumber daya (seperti data dari API) dari domain yang berbeda dengan domain halaman web itu sendiri. Ini adalah bagian dari implementasi kebijakan Same-Origin Policy yang bertujuan melindungi pengguna dari eksploitasi data antar situs web.

Jika aplikasi frontend Anda berada di https://aplikasi-saya.com dan mencoba mengakses API di https://api-pihak-ketiga.com, ini adalah permintaan cross-origin. Secara default, tanpa konfigurasi yang tepat, browser akan memblokir permintaan tersebut.

Mengapa Masalah CORS Terjadi?

Browser memblokir permintaan cross-origin untuk alasan keamanan. Ini mencegah skrip dari situs jahat membaca data sensitif yang diakses oleh browser dari situs lain (misalnya, data perbankan saat Anda masuk ke akun bank).

Error CORS paling umum adalah pesan di konsol developer yang menunjukkan bahwa header Access-Control-Allow-Origin tidak ada atau tidak mengizinkan origin Anda. Solusi idealnya adalah server API target mengkonfigurasi header CORS untuk mengizinkan origin Anda, namun ini tidak selalu memungkinkan.

Apa itu CORS Proxy / API Proxy?

Ketika Anda tidak bisa mengkonfigurasi server API target (misalnya, menggunakan API publik atau API pihak ketiga), CORS Proxy (atau API Proxy) muncul sebagai solusi alternatif. Proxy ini adalah server perantara milik Anda (atau yang Anda gunakan) yang berfungsi menjembatani permintaan antara frontend Anda dan API target.

Bagaimana Cara Kerja CORS Proxy?

Cara kerjanya melibatkan beberapa langkah:

Frontend Anda (aplikasi-saya.com) mengirim permintaan ke server Proxy Anda (misalnya, di proxy-saya.com). Permintaan ini sah menurut browser karena ditujukan ke origin yang diizinkan (dalam banyak kasus, proxy di-host di origin yang sama atau diizinkan oleh frontend).
Server Proxy (proxy-saya.com) menerima permintaan tersebut. Sebagai server, ia tidak terikat oleh batasan Same-Origin Policy browser.
Proxy kemudian membuat permintaan *server-ke-server* ke API target (api-pihak-ketiga.com).
API target merespons ke Proxy.
Proxy menerima respons dari API target. Sebelum meneruskan respons kembali ke frontend Anda, Proxy menambahkan atau memodifikasi header CORS (misalnya, menambahkan Access-Control-Allow-Origin: https://aplikasi-saya.com) ke respons tersebut.
Frontend Anda menerima respons dari Proxy (dari proxy-saya.com) dengan header CORS yang sudah "benar", sehingga browser mengizinkan frontend untuk memproses data respons.

Manfaat Menggunakan CORS Proxy

✓ Mengatasi Masalah CORS: Manfaat utama untuk mengakses API lintas origin.
✓ Menyembunyikan Kunci API: Kunci sensitif bisa disimpan di sisi server proxy, bukan di kode frontend yang terekspos.
✓ Kontrol Tambahan: Dapat menerapkan rate limiting, logging, atau transformasi data sebelum respons sampai ke frontend.

Contoh Layanan CORS Proxy Publik Gratis (Untuk Pengujian)

Untuk keperluan pengujian atau pengembangan prototipe sederhana, ada beberapa layanan proxy CORS publik gratis yang dapat Anda coba. Namun, kami tekankan kembali:

PERINGATAN PENTING!

Layanan proxy publik gratis TIDAK DIREKOMENDASIKAN untuk penggunaan di lingkungan produksi atau dengan data sensitif. Mereka:

Seringkali tidak stabil dan tidak reliable.
Mungkin memiliki batasan penggunaan (rate limits) yang ketat.
Tidak ada jaminan uptime atau privasi data.
Bisa berhenti beroperasi kapan saja tanpa pemberitahuan.

Gunakan hanya untuk eksperimen dan pengembangan lokal.

Beberapa contoh yang sering disebut (status ketersediaan bisa berubah sewaktu-waktu):

CORS Anywhere:
https://cors-anywhere.herokuapp.com/
Layanan ini sering di-deploy di platform gratis seperti Heroku (meskipun Heroku Free Tier kini terbatas). Cara menggunakannya adalah dengan menambahkan URL proxy ini di depan URL API target Anda.
Contoh: Mengakses https://api.example.com/data melalui proxy menjadi https://cors-anywhere.herokuapp.com/https://api.example.com/data
All Origins:
https://allorigins.win/
Layanan serupa yang juga bertindak sebagai proxy. Penggunaannya mirip dengan CORS Anywhere, tambahkan URL proxy di depan URL target.
Contoh: Mengakses https://api.example.com/data melalui proxy menjadi https://allorigins.win/raw?url=https://api.example.com/data (perhatikan format URL-nya mungkin sedikit berbeda, sering pakai parameter ?url= atau path lain). Selalu cek dokumentasi atau cara pakai terbaru layanan tersebut.
Thingproxy:
https://thingproxy.freeboard.io/fetch/
Layanan proxy publik lainnya yang sering digunakan untuk development atau testing. Mirip dengan contoh sebelumnya, Anda menempatkan URL proxy di depan URL API target.
Contoh: Mengakses https://api.example.com/data melalui proxy menjadi https://thingproxy.freeboard.io/fetch/https://api.example.com/data
Contoh Implementasi Komunitas Lainnya:

Ada banyak implementasi serupa yang dibuat dan di-host oleh komunitas di berbagai platform (misalnya, di Glitch, Vercel, atau layanan gratis lainnya). Anda mungkin perlu mencarinya secara online ("public free cors proxy list") namun selalu verifikasi keandalan dan baca peringatan penggunaannya.

Jika Anda memerlukan proxy yang handal untuk aplikasi serius, pertimbangkan untuk membangun server proxy Anda sendiri di server yang Anda kontrol atau menggunakan layanan proxy berbayar yang profesional.

Kelemahan dan Pertimbangan

× Menambah Kompleksitas & Latensi: Memperkenalkan satu layer tambahan dalam arsitektur komunikasi.
× Biaya Hosting: Jika Anda meng-host proxy sendiri.
× Isu Keamanan: Proxy yang tidak aman bisa menjadi celah.
× Bukan Solusi Ideal: Solusi terbaik tetap pada konfigurasi CORS di server API target jika memungkinkan.
× Ketidakstabilan Layanan Gratis: Seperti dijelaskan di atas, proxy gratis tidak reliable untuk produksi.

Kesimpulan

CORS Proxy/API Proxy adalah solusi pragmatis untuk masalah permintaan lintas origin, terutama ketika Anda bekerja dengan API yang tidak dapat Anda konfigurasi. Mereka memungkinkan frontend Anda berkomunikasi dengan API melalui server perantara yang mengatasi batasan CORS browser. Namun, sadari kelemahan dan pertimbangan keamanannya, dan pilihlah solusi ini dengan bijak. Untuk aplikasi serius, hindari penggunaan proxy publik gratis dan pertimbangkan implementasi proxy Anda sendiri.

Cari Blog Ini

terpakksa