Cara Mengatasi Error CORS (Cross-Origin Resource Sharing) dalam Pengembangan Web

Foto: Markus Spiske / Pexels

Error CORS adalah salah satu masalah paling umum yang dihadapi developer web. Ini sering muncul saat aplikasi kamu mencoba berkomunikasi dengan API yang berada di domain berbeda. Memahami penyebab dan cara mengatasinya sangat penting untuk pengembangan web yang lancar.

Panduan ini akan membantu kamu memahami apa itu CORS, mengapa error ini terjadi, dan langkah-langkah konkret untuk memperbaikinya di sisi klien maupun server.

Apa Itu CORS dan Mengapa Penting?

CORS (Cross-Origin Resource Sharing) adalah mekanisme keamanan berbasis browser yang memungkinkan server untuk mengindikasikan origin mana saja (domain, skema, atau port) yang diizinkan untuk memuat sumber dayanya. Ini adalah bagian penting dari keamanan web yang modern.

Tujuan utama CORS adalah untuk memungkinkan interaksi lintas-origin yang aman antara browser dan server, sambil tetap mematuhi Same-Origin Policy (SOP) yang secara default memblokir permintaan lintas-origin.

Origin didefinisikan oleh kombinasi skema (protokol, misalnya http atau https), host (domain, misalnya example.com), dan port (misalnya 80 atau 443). Dua URL memiliki origin yang sama jika ketiga komponen ini identik.

Bagaimana CORS Bekerja: Simple Request dan Preflight Request

Mekanisme kerja CORS melibatkan interaksi antara browser dan server untuk menentukan apakah permintaan lintas-origin diizinkan.

Untuk ‘simple requests’ (permintaan GET, POST, HEAD dengan header tertentu), browser secara otomatis menambahkan header Origin ke permintaan. Server kemudian merespons dengan header Access-Control-Allow-Origin untuk mengindikasikan apakah origin peminta diizinkan.

Untuk ‘preflight requests’ (permintaan non-simple, seperti PUT, DELETE, atau permintaan dengan header kustom), browser akan mengirim permintaan OPTIONS terlebih dahulu. Permintaan ini menanyakan server apakah permintaan sebenarnya diizinkan.

Jika preflight request berhasil, server akan merespons dengan header seperti Access-Control-Allow-Methods dan Access-Control-Allow-Headers yang mengindikasikan metode dan header yang diizinkan. Setelah itu, browser akan mengirim permintaan sebenarnya.

Penyebab Umum CORS Error

CORS error seringkali muncul karena konfigurasi yang tidak tepat di sisi server atau klien. Memahami penyebabnya akan membantu kamu mendiagnosis masalah dengan lebih cepat.

Penyebab paling umum CORS error adalah server tidak mengembalikan header Access-Control-Allow-Origin yang sesuai, atau mengembalikan nilai yang tidak cocok dengan origin permintaan klien.

CORS error juga dapat terjadi jika preflight request (permintaan OPTIONS) gagal, misalnya karena server tidak dikonfigurasi untuk menangani metode OPTIONS atau tidak merespons dengan header CORS yang benar untuk preflight.

Masalah dengan kredensial (seperti cookies atau header otorisasi) juga dapat menyebabkan CORS error jika server tidak mengizinkan kredensial (Access-Control-Allow-Credentials: true) atau jika Access-Control-Allow-Origin diatur ke * saat kredensial digunakan.

Mengatasi CORS Error di Sisi Server (Backend)

Sebagian besar solusi untuk mengatasi error CORS terletak pada konfigurasi server yang benar. Kamu perlu mengatur beberapa header HTTP agar server mengizinkan permintaan dari origin yang berbeda.

1. Konfigurasi Access-Control-Allow-Origin: Untuk mengatasi CORS error di sisi server, header ini harus diatur untuk mengizinkan origin spesifik dari klien (misalnya, https://your-frontend.com). Atau, dengan hati-hati, kamu bisa menggunakan * untuk mengizinkan semua origin, namun ini tidak disarankan untuk API yang memerlukan kredensial atau jika ada data sensitif.
2. Konfigurasi Access-Control-Allow-Methods: Header ini harus diatur di server untuk mengizinkan metode HTTP yang akan digunakan oleh klien (misalnya, GET, POST, PUT, DELETE, OPTIONS). Ini penting terutama untuk preflight requests.
3. Konfigurasi Access-Control-Allow-Headers: Jika klien mengirim header kustom (misalnya, Authorization, X-Custom-Header), server harus mengizinkannya dengan mengatur header Access-Control-Allow-Headers.
4. Tangani Kredensial dengan Access-Control-Allow-Credentials: Untuk permintaan yang menyertakan kredensial (seperti cookies atau header otorisasi), server harus merespons dengan Access-Control-Allow-Credentials: true. Klien juga harus menyertakan opsi kredensial (misalnya, credentials: 'include' di Fetch API). Ingat, jika Access-Control-Allow-Credentials adalah true, Access-Control-Allow-Origin tidak boleh *.
5. Optimalkan dengan Access-Control-Max-Age: Header ini dapat digunakan untuk meng-cache hasil preflight request selama periode waktu tertentu, mengurangi jumlah permintaan OPTIONS yang dikirim browser.

Contoh Implementasi di Node.js (Express):

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

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

// Mengizinkan origin spesifik
app.use(cors({
  origin: 'https://your-frontend.com',
  methods: ['GET', 'POST', 'PUT', 'DELETE'],
  allowedHeaders: ['Content-Type', 'Authorization'],
  credentials: true,
  maxAge: 3600
}));

app.get('/api/data', (req, res) => {
  res.json({ message: 'Data dari API' });
});

app.listen(3000, () => {
  console.log('Server berjalan di port 3000');
});

Contoh Implementasi di PHP (Laravel):

Laravel biasanya menggunakan middleware untuk konfigurasi CORS. Kamu bisa menggunakan paket seperti fruitcake/laravel-cors atau mengkonfigurasi middleware secara manual.

// app/Http/Middleware/CorsMiddleware.php
namespace AppHttpMiddleware;

use Closure;

class CorsMiddleware
{
    public function handle($request, Closure $next)
    {
        $headers = [
            'Access-Control-Allow-Origin'      => 'https://your-frontend.com',
            'Access-Control-Allow-Methods'     => 'POST, GET, OPTIONS, PUT, DELETE',
            'Access-Control-Allow-Credentials' => 'true',
            'Access-Control-Max-Age'           => '86400',
            'Access-Control-Allow-Headers'     => 'Content-Type, X-Requested-With, Authorization'
        ];

        if ($request->isMethod('OPTIONS')) {
            return response()->json('{"method":"OPTIONS"}', 200, $headers);
        }

        $response = $next($request);
        foreach ($headers as $key => $value) {
            $response->header($key, $value);
        }

        return $response;
    }
}

Setelah membuat middleware, daftarkan di app/Http/Kernel.php dalam array $middleware atau $middlewareGroups.

Mengatasi CORS Error di Sisi Klien (Frontend)

Meskipun sebagian besar masalah CORS harus diselesaikan di sisi server, ada beberapa solusi yang bisa kamu terapkan di sisi klien, terutama selama pengembangan.

Di sisi klien, terutama selama pengembangan, proxy server dapat digunakan untuk meneruskan permintaan ke API. Ini membuat permintaan dari browser ke proxy menjadi same-origin, sehingga menghindari masalah CORS. Toolchain frontend populer seperti Create React App memiliki fitur proxy bawaan.

Mode no-cors pada Fetch API dapat digunakan untuk mengirim permintaan lintas-origin tanpa memicu pemeriksaan CORS. Namun, respons yang diterima tidak dapat diakses oleh JavaScript (opaque response). Ini hanya berguna untuk efek samping, bukan untuk membaca data yang dikembalikan oleh API.

Praktik Terbaik dan Pertimbangan Keamanan CORS

Mengkonfigurasi CORS dengan benar tidak hanya mengatasi error, tetapi juga menjaga keamanan aplikasi kamu. Praktik terbaik keamanan CORS meliputi mengizinkan hanya origin yang spesifik dan tepercaya. Hindari Access-Control-Allow-Origin: * di lingkungan produksi, terutama jika kredensial digunakan.

Selalu batasi metode dan header HTTP yang diizinkan hanya pada yang benar-benar diperlukan. Ini akan meminimalkan potensi serangan dan memastikan aplikasi kamu tetap aman.