CORS nedir? Preflight (OPTIONS) isteği ne zaman gönderilir?

Cevap

CORS (Cross-Origin Resource Sharing), tarayıcının Same-Origin Policy kısıtlamasını sunucunun izniyle gevşetmesini sağlayan mekanizmadır. Origin = protokol + domain + port; https://app.com ile https://api.app.com farklı origin'dir.

Önemli nokta: CORS bir tarayıcı kuralıdır. İstek çoğu zaman sunucuya ulaşır; tarayıcı, cevapta uygun başlık yoksa JavaScript'in cevabı okumasını engeller. Postman veya curl'de CORS hatası olmaz.

Access-Control-Allow-Origin: https://app.com
Access-Control-Allow-Methods: GET, POST, PUT
Access-Control-Allow-Headers: Content-Type, Authorization
Access-Control-Allow-Credentials: true
Access-Control-Max-Age: 600

Preflight ne zaman olur?

"Basit istek" olmayan durumlarda tarayıcı önce bir OPTIONS isteği gönderip izin sorar:

  • Metot GET, HEAD, POST dışındaysa (PUT, DELETE, PATCH).
  • Content-Type application/json gibi basit olmayan bir tipse.
  • Authorization gibi özel header'lar varsa.

Access-Control-Max-Age preflight cevabını cache'leyerek her istekte tekrarını önler.

Sık hatalar

  • Cookie göndermek için client'ta credentials: "include" ve sunucuda Allow-Credentials: true gerekir; bu durumda Allow-Origin: * kullanılamaz, origin açıkça yazılmalıdır.
  • CORS'u frontend'den "kapatmak" mümkün değildir; çözüm sunucu ayarı veya geliştirmede bir proxy'dir (Vite server.proxy).
  • CORS bir yetkilendirme (authorization) mekanizması değildir; sunucu yine kimlik doğrulaması yapmalıdır.
  1. Bir URL'yi tarayıcıya yazıp Enter'a bastığınızda neler olur?OrtaTarayıcı & Web API'leriFrontend
  2. Web Worker nedir? Service Worker'dan farkı nedir?ZorTarayıcı & Web API'leriFrontend
  3. IntersectionObserver ne işe yarar? Örnek kullanım verin.OrtaTarayıcı & Web API'leriFrontend
  4. Tarayıcı önbelleği nasıl çalışır? Cache-Control başlıkları nelerdir?OrtaTarayıcı & Web API'leriFrontend
  5. localStorage, sessionStorage, cookie ve IndexedDB arasındaki farklar nelerdir?OrtaTarayıcı & Web API'leriFrontend
  6. script etiketinde async ile defer arasındaki fark nedir?KolayTarayıcı & Web API'leriFrontend

Bu konuda başka bir soru biliyor musun?

Mülakatta karşılaştığın soruları ekle, onaylandıktan sonra yayına alınsın.

Soru ekle