CORS Nedir? Preflight, Origin ve Access-Control-Allow-Origin Rehberi

CORS hatası neden olur? Origin mantığı, preflight (OPTIONS) isteği ve Access-Control-Allow-* başlıklarını gerçek örneklerle öğrenin.

CORS Nedir?

CORS (Cross-Origin Resource Sharing), tarayıcının bir origin'den açılan sayfanın başka bir origin'e yaptığı istekleri hangi koşullarda kabul edeceğini belirleyen HTTP tabanlı bir mekanizmadır.

Kritik nokta: CORS, esas olarak tarayıcı güvenlik modeli ile ilgilidir. Sunucunuz çalışıyor olabilir ama tarayıcı cevabı JavaScript'e vermeyi reddedebilir.

Same-Origin Policy Kısa Özet

Bir origin; protokol + host + port kombinasyonudur. Aşağıdaki ikisi farklı origin'dir:

https://app.example.com
https://api.example.com

Bu fark nedeniyle tarayıcı, API yanıtını doğrudan paylaşmadan önce CORS kurallarını kontrol eder.

Preflight (OPTIONS) Neden Atılır?

Bazı istekler "basit" sayılmaz. Tarayıcı önce bir OPTIONS isteği gönderip "Bu isteğe izin var mı?" diye sorar:

OPTIONS /users HTTP/1.1
Origin: https://app.example.com
Access-Control-Request-Method: PUT
Access-Control-Request-Headers: authorization, content-type

Sunucu uygun header'larla cevap verirse asıl istek gönderilir.

Temel CORS Header'ları

Access-Control-Allow-Origin: Hangi origin'lere izin var?
Access-Control-Allow-Methods: Hangi HTTP metodları serbest?
Access-Control-Allow-Headers: Hangi request header'ları kabul?
Access-Control-Allow-Credentials: Cookie/credential taşınacak mı?

Sık Hata: Credentials + Wildcard

Eğer istemci credentials: "include" kullanıyorsa, sunucuda Access-Control-Allow-Origin: * kullanamazsınız. Bu durumda açıkça origin belirtmeniz gerekir.

Express Örneği

import cors from "cors";

app.use(cors({
  origin: ["https://app.example.com"],
  methods: ["GET", "POST", "PUT", "DELETE"],
  credentials: true,
}));

CORS Hatasını Çözmek İçin Kontrol Listesi

İstek atan sayfanın gerçek Origin değerini doğrulayın.
API cevabında doğru Access-Control-Allow-Origin döndüğünü kontrol edin.
Preflight OPTIONS isteği 2xx dönüyor mu bakın.
Gerekli header/metod izinleri listede mi doğrulayın.
Credentials varsa wildcard kullanmadığınızdan emin olun.

Sonuç

CORS, backend'inizi kapatan bir duvar değil; tarayıcıya "hangi cross-origin paylaşım güvenli" sorusunun cevabını veren bir protokoldür. Doğru origin, doğru preflight cevabı ve doğru credentials politikasıyla CORS problemleri net biçimde çözülür.