CORS Dijelaskan Cara Melacak Kesalahan Antar Asal Tanpa Kehilangan Pikiran

Anda telah membuat permintaan fetch. Tab Jaringan menunjukkan bahwa permintaan tersebut telah dikirim. Namun di konsol muncul dinding merah: Akses ke fetch pada 'https://api.example.com' dari asal 'https://yourapp.com' telah diblokir oleh kebijakan CORS.

Sebelum memasuki penjelasan — berikut adalah jalur diagnosis tercepat. Buka DevTools → Tab Jaringan → temukan permintaan yang gagal → lihat Kepala Respons. Jika Anda tidak melihat Access-Control-Allow-Origin, maka server Anda tidak mengirimkan kepala CORS. Itulah solusinya. Sisanya dalam artikel ini menjelaskan secara rinci apa yang harus dikirim dan mengapa.

Apa yang Sebenarnya Dimaksud dengan CORS

CORS — Bagi Sumber Antar Asal — diperkuat oleh browser, bukan oleh server Anda. API Anda tidak secara alami memblokir permintaan antar asal. Browser yang melakukan itu atas nama pengguna untuk mencegah skrip di evil.com membaca data rekening Anda secara diam-diam.

Browser memeriksa: "Apakah respons dari API tersebut memberi tahu saya bahwa asal ini diperbolehkan untuk membaca data tersebut?" Jika tidak, maka respons tersebut diblokir — meskipun server sudah memproses permintaan dan mengembalikan kode 200. Server tidak tahu mengapa klien menolaknya.

Ini penting saat Anda melakukan debugging: kesalahan selalu terjadi di sisi klien. Server harus memberi tahu browser "ya, asal ini diperbolehkan." Itulah yang dilakukan oleh kepala respons CORS.

Permintaan Sederhana vs Permintaan Preflight

Tidak semua permintaan antar asal berperilaku sama. Browser membedakan dua jenis permintaan ini.

Permintaan sederhana adalah permintaan GET atau POST dengan tubuh berupa teks biasa atau dikodekan formulir dan sejumlah kecil kepala yang diperbolehkan. Browser mengirimkannya langsung dan memeriksa respons untuk Access-Control-Allow-Origin.

Permintaan Preflight terjadi terlebih dahulu ketika permintaan Anda tidak memenuhi syarat tersebut — misalnya, ketika Anda mengirimkan PUT atau DELETE, mencakup kepala khusus seperti Authorization atau Content-Type: application/json, atau mengirimkan kredensial. Browser memicu permintaan otomatis OPTIONS ke URL yang sama sebelum permintaan aktual Anda. Jika server tidak merespons permintaan tersebut dengan kepala CORS yang tepat, maka permintaan Anda tidak akan pergi. OPTIONS Jika Anda melihat permintaan

di tab jaringan yang mengembalikan kode 404 atau 405, itu adalah alasan mengapa permintaan Anda gagal. Server Anda harus menangani OPTIONS untuk setiap rute yang menerima lalu lintas antar asal. OPTIONS Kepala yang Penting

Mengatur perbaikan kepala CORS berarti memahami apa yang benar-benar dikontrol oleh setiap kepala respons:

— asal mana yang diperbolehkan membaca respons. Ya, asal tertentu (

• Access-Control-Allow-Origin ) atauhttps://yourapp.comuntuk semua asal. * — metode HTTP mana yang diperbolehkan (misalnya,
• Access-Control-Allow-Methods — kepala permintaan mana yang diperbolehkan dikirim oleh browser (misalnya, GET, POST, PUT, DELETE, OPTIONS).
• Access-Control-Allow-Headers — apakah cookie dan kepala otentikasi dapat dikirim bersama permintaan. Harus Authorization, Content-Type).
• Access-Control-Allow-Credentials dilakukan secara eksplisit. true — seberapa lama dalam detik browser harus menyimpan respons preflight.
• Access-Control-Max-Age Penyimpangan Wildcard

Menggunakan

adalah cara tercepat untuk membuka API Anda — tetapi akan rusak saat Anda menambahkan kredensial. Ketika Access-Control-Allow-Origin: * diperlukan, wildcard ditolak oleh browser. Anda harus menentukan asal secara eksplisit: Access-Control-Allow-Credentials: true Jika Anda memiliki beberapa asal yang diperbolehkan, baca kepala asal dari permintaan dan kembalikan secara kondisional — jangan gabungkan mereka.

# This will fail with credentials:
Access-Control-Allow-Origin: *
Access-Control-Allow-Credentials: true

# This works:
Access-Control-Allow-Origin: https://yourapp.com
Access-Control-Allow-Credentials: true

Kesalahan CORS Umum dan Artinya Origin Pesan kesalahan dari browser biasanya memberi tahu Anda secara tepat apa yang hilang. Berikut adalah referensi cepat:

Pesan kesalahan

Artinya

Cara memperbaikinya	Tidak ada kepala 'Access-Control-Allow-Origin'	Server tidak mengirimkan kepala CORS sama sekali
ke dalam respons	Nilai kepala 'Access-Control-Allow-Origin' … tidak sesuai dengan asal yang disediakan	Tambahkan Access-Control-Allow-Origin Kesalahan asal — server mengembalikan asal yang salah atau wildcard dengan kredensial
Kembalikan kepala asal dari permintaan secara kondisional; hapus wildcard saat menggunakan kredensial	Metode PUT tidak diperbolehkan oleh Access-Control-Allow-Methods	Metode HTTP tidak terdaftar dalam kepala metode yang diperbolehkan
Tambahkan metode yang hilang ke	Kepala permintaan 'Authorization' tidak diperbolehkan oleh Access-Control-Allow-Headers	Kepala khusus hilang dari daftar yang diperbolehkan Access-Control-Allow-Methods
Tambahkan kepala tersebut ke	Respons terhadap permintaan preflight tidak melewati pengecekan akses kontrol	Permintaan OPTIONS mengembalikan status yang salah atau kepala yang hilang Access-Control-Allow-Headers
Tangani permintaan OPTIONS secara eksplisit; kembalikan 200/204 dengan kepala yang tepat	Kredensial tidak didukung jika kepala CORS 'Access-Control-Allow-Origin' adalah '*'	Wildcard digunakan dalam mode kredensial
Ganti	dengan asal eksplisit; tambahkan	Cara Mengatur CORS di Express, FastAPI, dan Nginx * Express (Node.js) Access-Control-Allow-Credentials: true

FastAPI (Python)

Nginx

const cors = require('cors');

app.use(cors({
  origin: 'https://yourapp.com',
  methods: ['GET', 'POST', 'PUT', 'DELETE', 'OPTIONS'],
  allowedHeaders: ['Content-Type', 'Authorization'],
  credentials: true,
  maxAge: 86400
}));

// Handle preflight for all routes
app.options('*', cors());

Perhatikan pola Nginx: Anda perlu

from fastapi.middleware.cors import CORSMiddleware

app.add_middleware(
    CORSMiddleware,
    allow_origins=["https://yourapp.com"],
    allow_credentials=True,
    allow_methods=["*"],
    allow_headers=["*"],
)

di kedua blok

location /api/ {
    if ($request_method = 'OPTIONS') {
        add_header 'Access-Control-Allow-Origin' 'https://yourapp.com';
        add_header 'Access-Control-Allow-Methods' 'GET, POST, PUT, DELETE, OPTIONS';
        add_header 'Access-Control-Allow-Headers' 'Authorization, Content-Type';
        add_header 'Access-Control-Allow-Credentials' 'true';
        add_header 'Access-Control-Max-Age' 86400;
        add_header 'Content-Length' 0;
        return 204;
    }

    add_header 'Access-Control-Allow-Origin' 'https://yourapp.com';
    add_header 'Access-Control-Allow-Credentials' 'true';

    proxy_pass http://backend;
}

dan blok utama. Kepala yang diatur di dalam add_header blok tidak ditransfer ke blok luar. OPTIONS Daftar Pemeriksaan Debugging Anda if Ketika Anda mengalami kesalahan CORS, kerjakan ini secara berurutan:

Baca pesan kesalahan lengkapnya

— ini memberi tahu Anda secara tepat kepala atau nilai yang salah.

1. Periksa tab jaringan — lihat kepala respons aktual, bukan apa yang Anda pikir telah dikonfigurasi.
2. Periksa permintaan OPTIONS — jika gagal atau hilang, server Anda tidak menangani preflight.
3. Verifikasi asal sesuai persis — tanda bawah, HTTP vs HTTPS, dan nomor port semua penting.
4. Hapus wildcard jika Anda menggunakan kredensial — mereka saling eksklusif.
5. Pastikan kepala tidak dihapus oleh proxy — Nginx dan CDN sering kali menghapus atau mengganti kepala CORS.
6. Satu pengecualian mudah terlewat: jika API Anda berada di balik proxy atau CDN, lapisan tersebut mungkin menambahkan kepala sendiri yang bertentangan dengan apa yang dikembalikan oleh server aplikasi Anda. Ketika dua kepala tersebut muncul dalam satu respons, browser menolak keseluruhan respons. Selalu periksa kepala respons murni di tingkat jaringan — bukan hanya apa yang dihasilkan oleh kode aplikasi Anda.

Kasus lainnya: beberapa framework hanya menempelkan kepala CORS pada rute yang sesuai dengan handler terdaftar. Jika Anda mengalami kode 404 atau rute tidak terdaftar, middleware CORS mungkin tidak berjalan, dan Anda akan melihat kesalahan "tidak ada kepala" meskipun konfigurasi Anda tampak benar. Uji dengan endpoint yang valid terlebih dahulu. Access-Control-Allow-Origin Jika Anda perlu cepat menghasilkan kepala CORS yang tepat yang harus dikembalikan oleh server Anda, alat

IO Tools CORS Headers Builder

memungkinkan Anda mengatur asal, metode, dan kredensial, serta menghasilkan blok kepala yang tepat siap dipasang ke konfigurasi server Anda. Catatan tentang Keamanan CORS bukan mekanisme keamanan API. Menetapkan

tidak membuat API Anda publik dalam arti yang bermakna dari segi luas serangan — curl, Postman, dan panggilan antar server tidak terkena batasan CORS. Hanya JavaScript dari browser yang terkena. Jika API Anda membutuhkan autentikasi, enformentkan di tingkat API dengan token atau sesi. Kepala CORS hanya memberi tahu browser mana asal yang diperbolehkan membaca respons dari JavaScript. Mereka bersifat independen terhadap kontrol akses nyata.

Dengan konteks ini, Anda dapat membuat keputusan yang bijak tentang konfigurasi CORS Anda, bukan mengunci semuanya karena kekhawatiran keamanan yang salah atau membuka semuanya tanpa memahami trade-off yang terlibat. Access-Control-Allow-Origin: * CORS Dijelaskan: Cara Melacak Kesalahan Antar Asal Tanpa Kehilangan Pikiran 2

CORS Dijelaskan: Cara Melacak Kesalahan Antar Asal Tanpa Kehilangan Pikiran 1

Anda mungkin juga menyukai