Error CORS sering muncul saat aplikasi web mengambil data dari API atau domain lain. Pesan di konsol browser biasanya berbunyi “Access to fetch has been blocked by CORS policy”. Bagi pengembang pemula, error ini terasa membingungkan karena API mungkin sudah berjalan normal, tetapi browser tetap memblokir permintaan.
Penyebab utamanya bukan server mati, melainkan kebijakan keamanan browser. Browser membatasi permintaan lintas origin demi melindungi data pengguna. Artikel ini membahas cara memahami, mendiagnosis, dan mengatasi error CORS pada aplikasi web secara aman dan praktis.
Apa Itu Error CORS dan Mengapa Terjadi?
CORS (Cross-Origin Resource Sharing) adalah mekanisme keamanan browser yang mengatur apakah halaman web boleh mengakses resource dari origin berbeda. Origin terdiri dari protokol, domain, dan port. Contoh, https://app.example.com dan https://api.example.com dianggap berbeda origin.
Saat aplikasi web meminta data ke API di domain lain, browser mengirim permintaan tersebut dengan aturan CORS. Jika server API tidak memberikan header izin yang sesuai, browser akan memblokir respons. Penting dipahami: error CORS biasanya bukan masalah di kode frontend saja, tetapi pada komunikasi antara frontend, server, dan konfigurasi header.
Beberapa kondisi yang sering memicu error CORS:
- Frontend berjalan di localhost:3000, sedangkan API berada di localhost:8000.
- Server API belum mengirim header Access-Control-Allow-Origin.
- Permintaan menggunakan metode POST, PUT, atau header khusus sehingga memerlukan preflight OPTIONS.
- Aplikasi mengirim cookie atau token dengan mode credentials, tetapi konfigurasi server tidak mendukungnya.
- Aplikasi web dibuka melalui WebView Android dengan origin file:// atau null, sehingga izin CORS perlu ditangani khusus.
Cara Mengatasi Error CORS di Sisi Frontend
Sebelum mengubah server, pastikan alamat API sudah benar. Kesalahan kecil seperti salah domain, salah port, atau penggunaan http saat API memakai https bisa memicu error. Buka tab Network di DevTools browser, lalu periksa request yang gagal dan header responsnya.
Untuk pengembangan lokal, gunakan proxy agar frontend dan API terlihat berasal dari origin yang sama. Pada React, Vite, atau Vue, proxy biasanya diatur di file konfigurasi development. Dengan cara ini, browser tidak menganggap permintaan sebagai lintas origin.
// contoh konfigurasi proxy Vite
server: {
proxy: {
'/api': {
target: 'http://localhost:8000',
changeOrigin: true
}
}
}Alternatif lain adalah memanggil API melalui backend milik sendiri, bukan langsung dari browser. Pola ini sering disebut backend for frontend. Frontend meminta ke /api/data, lalu server internal meneruskan permintaan ke API eksternal. Cara ini lebih aman karena kredensial API tidak terekspos di browser.
Hindari mematikan keamanan browser atau memakai ekstensi “disable CORS” untuk solusi permanen. Cara tersebut hanya menutupi masalah dan tidak aman untuk pengguna. Untuk aplikasi Android WebView, sebaiknya muat halaman melalui URL https yang valid, bukan file lokal, agar origin dan kebijakan keamanan lebih mudah dikelola.
Cara Mengatasi Error CORS di Sisi Backend
Solusi paling tepat adalah mengatur header CORS di server API. Server harus mengizinkan origin frontend secara eksplisit. Jangan asal menggunakan tanda bintang * jika aplikasi mengirim cookie, sesi, atau token credential.
1. Contoh pada Node.js Express
Gunakan middleware cors agar konfigurasi lebih rapi. Batasi origin hanya untuk domain yang memang membutuhkan akses.
const express = require('express');
const cors = require('cors');
const app = express();
app.use(cors({
origin: 'https://app.example.com',
methods: ['GET', 'POST', 'PUT', 'DELETE'],
allowedHeaders: ['Content-Type', 'Authorization'],
credentials: true
}));2. Contoh pada PHP
Pada PHP, header CORS dapat dikirim sebelum output apa pun. Pastikan tidak ada spasi atau teks yang tercetak sebelum header dikirim.
<?php
header("Access-Control-Allow-Origin: https://app.example.com");
header("Access-Control-Allow-Methods: GET, POST, PUT, DELETE, OPTIONS");
header("Access-Control-Allow-Headers: Content-Type, Authorization");
header("Access-Control-Allow-Credentials: true");
if ($_SERVER['REQUEST_METHOD'] === 'OPTIONS') {
http_response_code(204);
exit;
}
?>3. Contoh pada Nginx
Jika API berada di belakang Nginx, tambahkan header pada lokasi atau server block. Sesuaikan origin dengan domain frontend yang valid.
add_header 'Access-Control-Allow-Origin' 'https://app.example.com' always;
add_header 'Access-Control-Allow-Methods' 'GET, POST, PUT, DELETE, OPTIONS' always;
add_header 'Access-Control-Allow-Headers' 'Content-Type, Authorization' always;
add_header 'Access-Control-Allow-Credentials' 'true' always;
if ($request_method = OPTIONS) {
return 204;
}Menangani Preflight dan Credentials
Permintaan yang memakai header Authorization, Content-Type: application/json, atau metode selain GET sederhana akan memicu preflight request. Browser lebih dulu mengirim metode OPTIONS untuk memastikan server mengizinkan permintaan tersebut.
Pastikan endpoint OPTIONS merespons dengan status 204 atau 200, serta menyertakan header CORS yang benar. Jika server mengembalikan 404 atau 405 untuk OPTIONS, browser akan menganggap preflight gagal dan permintaan utama tidak pernah dikirim.
Untuk permintaan dengan cookie atau sesi, gunakan credentials: ‘include’ di sisi frontend. Di sisi server, header Access-Control-Allow-Credentials harus bernilai true, dan Access-Control-Allow-Origin tidak boleh berupa wildcard *. Origin harus disebutkan secara spesifik.
Tips Debugging Error CORS
- Buka DevTools → Network, lalu cek request yang gagal dan status responsnya.
- Periksa apakah error terjadi karena response header, preflight, atau koneksi jaringan.
- Uji API memakai curl atau Postman untuk memastikan server merespons normal di luar browser.
- Pastikan tidak ada duplikasi header CORS dari Nginx, Apache, dan aplikasi backend.
- Jika memakai WebView Android, cek origin halaman dan izin jaringan; gunakan URL HTTPS yang valid.
- Baca pesan error secara utuh karena browser biasanya menyebut header atau origin mana yang bermasalah.
Setelah konfigurasi diubah, lakukan hard refresh atau hapus cache bila perlu. Uji kembali dari domain yang berbeda, termasuk saat aplikasi diakses melalui browser Android. Jangan lupa membatasi origin yang diizinkan agar API tidak terbuka untuk semua situs.
Kesimpulan
Error CORS bukan gangguan acak, melainkan hasil dari kebijakan keamanan browser yang bekerja sesuai aturan. Solusi terbaik adalah memahami asal permintaan, memeriksa header respons, lalu mengatur izin CORS di server dengan tepat. Untuk pengembangan lokal, proxy bisa menjadi jalan pintas yang aman, sedangkan untuk produksi gunakan origin spesifik dan konfigurasi preflight yang benar.
Jika aplikasi web Anda masih mengalami error CORS, mulai dari tab Network, catat origin frontend dan endpoint API, lalu sesuaikan header di server. Butuh panduan lebih lanjut seputar tutorial aplikasi dan optimasi web? Kunjungi terus Solusitekno.id untuk tips teknologi yang praktis dan mudah diikuti.
