Cross-Origin Resource Sharing: Apa, Manfaat, dan Bagaimana Cara Konfigurasinya?

Di era digital saat ini, banyak website yang saling terhubung satu sama lain untuk bertukar data, gambar, video, hingga API. Namun, browser menerapkan aturan keamanan yang membatasi pertukaran data lintas origin, dan mekanisme untuk mengaturnya sering ditemui para pengembang web: Cross-Origin Resource Sharing (CORS).

Jika Anda pernah menemukan error seperti “Access to XMLHttpRequest has been blocked by CORS policy”, artikel ini cocok untuk Anda! Yuk, kita bahas tuntas tentang apa itu Cross-Origin Resource Sharing, fungsinya, hingga cara mengkonfigurasinya secara tepat!

Apa Itu Cross-Origin Resource Sharing (CORS)?

Cross-Origin Resource Sharing (CORS) adalah mekanisme berbasis header HTTP yang memungkinkan server menyatakan origin mana saja yang boleh mengakses sumber dayanya melalui browser. Origin adalah gabungan skema (protokol), host (domain), dan port. Jadi, https://example.com dan https://api.example.com dianggap sebagai dua origin yang berbeda.

Untuk memahami CORS, Anda perlu mengenal Same-Origin Policy (SOP) terlebih dahulu. SOP adalah aturan keamanan bawaan browser yang membatasi skrip di sebuah halaman untuk membaca respons dari origin lain. Permintaan sederhana sebenarnya tetap terkirim ke server, tetapi browser tidak mengizinkan skrip membaca responsnya kecuali server memberikan izin.

Di sinilah CORS berperan, yaitu melonggarkan SOP secara terkontrol. Misalnya, jika halaman di example.com ingin mengambil data dari api.situslain.com, browser akan memeriksa apakah server tujuan mengizinkan origin tersebut melalui header CORS.

CORS menggunakan header HTTP seperti Access-Control-Allow-Origin, Access-Control-Allow-Methods, dan Access-Control-Allow-Headers untuk menentukan apakah permintaan dari origin lain boleh diproses.

Contoh skenario umum:

• Website frontend Anda di myfrontend.com ingin mengambil data dari API di mybackend.com
• Jika server di mybackend.com tidak mengizinkan origin myfrontend.com, browser akan memblokir skrip di myfrontend.com untuk membaca responsnya

Mengapa Cross-Origin Resource Sharing (CORS) Penting?

Penggunaan Cross-Origin Resource Sharing bukan hanya soal teknis, tapi juga soal keamanan data dan kontrol akses. Berikut beberapa manfaat utama yang perlu Anda ketahui:

1. Membuka Akses Lintas Origin dengan Aman

Tanpa CORS, SOP akan menutup akses baca lintas origin sepenuhnya. CORS memungkinkan pemilik server membuka akses hanya untuk origin yang dipercaya, sehingga perlindungan SOP tetap terjaga. Perlu dipahami, perlindungan utama terhadap situs jahat yang mencoba membaca data pribadi dari situs lain tempat Anda sudah login berasal dari SOP. Konfigurasi CORS yang terlalu longgar justru bisa membuka celah tersebut.

2. Memberikan Akses Terkontrol

Dengan CORS, pemilik server dapat mengatur siapa saja yang boleh mengakses data mereka. Ini penting untuk layanan API publik maupun privat.

3. Mendukung Arsitektur Frontend-Backend Terpisah

Di zaman sekarang, banyak pengembang membangun frontend (React, Vue, dll.) terpisah dari backend (Node.js, Laravel, dll.). Tanpa konfigurasi CORS, komunikasi antara keduanya akan terganggu.

4. Meningkatkan Efisiensi Developer

Dengan konfigurasi yang tepat, developer tidak perlu mencari-cari solusi tidak resmi (workaround) hanya untuk mengakses API dari domain lain.

Baca Juga: Carrd.Co Adalah: Bagaimana Fungsinya untuk Website?

Bagaimana Cara Mengaktifkan dan Mengatur Cross-Origin Resource Sharing?

Cara mengaktifkan CORS tergantung pada teknologi backend yang Anda gunakan. Tapi prinsip dasarnya tetap sama: server harus mengatur respons HTTP agar menyertakan header Access-Control-Allow-Origin dan lainnya sesuai kebutuhan.

1. Mengatur CORS di Node.js (Express)

const express = require('express');
const cors = require('cors');
const app = express();

app.use(cors()); // Mengizinkan semua origin (kurang disarankan untuk produksi)

app.listen(3000, () => console.log('Server running on port 3000'));

Anda juga bisa memberikan pengaturan lebih detail:

app.use(cors({
  origin: 'https://myfrontend.com',
  methods: ['GET', 'POST'],
  allowedHeaders: ['Content-Type']
}));

2. Mengatur CORS di Apache

Tambahkan baris berikut di .htaccess atau konfigurasi server:

<IfModule mod_headers.c>
  Header set Access-Control-Allow-Origin "*"
</IfModule>

Namun, lebih aman jika Anda hanya mengizinkan origin tertentu:

Header set Access-Control-Allow-Origin "https://myfrontend.com"

3. Mengatur CORS di Nginx

Tambahkan baris ini di konfigurasi server block:

location /api/ {
    add_header 'Access-Control-Allow-Origin' '*';
    add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
    add_header 'Access-Control-Allow-Headers' 'Content-Type';
}

4. Mengatur CORS di Laravel

Laravel versi terbaru sudah menangani CORS secara global melalui middleware bawaan HandleCors, sehingga Anda tidak perlu menambahkan middleware cors di route. Pengaturannya dilakukan di file config/cors.php. Pada Laravel 11 ke atas, file ini tidak tersedia secara default, jadi terbitkan dulu dengan perintah berikut:

php artisan config:publish cors

Kemudian sesuaikan isinya, misalnya:

'paths' => ['api/*'],
'allowed_methods' => ['GET', 'POST'],
'allowed_origins' => ['https://myfrontend.com'],
'allowed_headers' => ['*'],

Route API Anda cukup ditulis seperti biasa, misalnya di routes/api.php:

use App\Http\Controllers\DataController;

Route::get('/data', [DataController::class, 'index']);

5. Tes Konfigurasi CORS

Anda bisa menguji langsung dari browser dengan menjalankan fetch di tab Console DevTools, lalu memeriksa header respons di tab Network. Cara lain, gunakan curl untuk melihat header CORS yang dikirim server:

curl -I -H "Origin: https://myfrontend.com" https://api.contoh.com/data

Jika konfigurasi benar, respons akan memuat header Access-Control-Allow-Origin yang sesuai.

Baca Juga: 10 Rekomendasi CMS Laravel Terbaik

Tips Aman Menggunakan Cross-Origin Resource Sharing

• Hindari menggunakan wildcard (*) di Access-Control-Allow-Origin untuk aplikasi yang butuh autentikasi
• Selalu cek log server saat terjadi error CORS, bisa jadi karena kesalahan header
• Gunakan HTTPS agar lebih aman dan kompatibel
• Jangan lupa tambahkan validasi tambahan di server, bukan hanya mengandalkan CORS

CORS dan Performa Aplikasi Web: Apa Hubungannya?

Selain soal keamanan, konfigurasi CORS juga berpengaruh terhadap performa aplikasi web Anda.

Ketika Anda mengatur CORS dengan tepat, Anda bisa meminimalkan jumlah request yang gagal dan mempercepat proses fetching data dari API. Hal ini sangat penting untuk aplikasi berbasis SPA (Single Page Application) atau aplikasi berbasis WebView yang banyak menggunakan request asinkron.

Perlu dipahami, preflight (permintaan OPTIONS yang dikirim browser sebelum permintaan utama) dipicu oleh metode atau header yang tidak termasuk kategori permintaan sederhana, misalnya metode PUT dan DELETE atau header Authorization. Membatasi origin tidak mengurangi jumlah preflight. Yang sering memperlambat justru konfigurasi keliru yang membuat permintaan gagal dan harus diulang, sehingga memperlambat aplikasi dan menguras bandwidth.

Beberapa tips tambahan agar konfigurasi CORS tidak memperlambat performa:

• Gunakan metode dan header yang minimal (hanya yang dibutuhkan)
• Hindari header kustom yang tidak perlu agar permintaan tidak memicu preflight
• Gunakan caching pada respons CORS, seperti Access-Control-Max-Age, agar browser tidak perlu mengecek ulang di setiap request

Dengan memperhatikan hal ini, Anda bukan hanya membangun aplikasi yang aman, tapi juga cepat, ringan, dan nyaman digunakan oleh pengguna.

Kesimpulan

Anda pernah stres gara-gara data API gagal dimuat di web karena CORS error?

Dengan memahami Same-Origin Policy dan mengonfigurasi Cross-Origin Resource Sharing (CORS) dengan benar, Anda bisa membuat website yang aman, efisien, dan profesional tanpa gangguan request yang ditolak browser.

Jika Anda ingin membangun website dengan backend dan frontend yang terhubung rapi dan aman, tim Sitespirit dapat membantu melalui layanan jasa pembuatan website, mulai dari perencanaan hingga peluncuran. Untuk perawatan berkala seperti pembaruan, backup, dan perbaikan bug, tersedia juga layanan maintenance website. Diskusikan kebutuhan Anda lewat konsultasi dengan tim kami.