CORS nedir? Backend tarafında nasıl doğru yapılandırılır?

CORS (Cross-Origin Resource Sharing), tarayıcının farklı origin'den (şema + domain + port) yapılan isteklere izin verip vermeyeceğini belirlemek için kullandığı HTTP başlık mekanizmasıdır. Varsayılan Same-Origin Policy, https://app.ornek.com'daki JavaScript'in https://api.ornek.com yanıtını okumasını engeller; sunucu izin verdiğini başlıklarla belirtir.

CORS bir tarayıcı kuralıdır: curl, Postman veya sunucudan sunucuya istekler CORS'tan etkilenmez. Yani CORS bir güvenlik duvarı ya da kimlik doğrulama yöntemi değildir.

Preflight

GET/POST dışındaki metotlar, application/json gibi "basit olmayan" içerik tipleri veya Authorization gibi özel başlıklar varsa tarayıcı önce bir OPTIONS isteği gönderir:

OPTIONS /orders
Origin: https://app.ornek.com
Access-Control-Request-Method: POST
Access-Control-Request-Headers: content-type, authorization

HTTP/1.1 204 No Content
Access-Control-Allow-Origin: https://app.ornek.com
Access-Control-Allow-Methods: GET, POST, PATCH
Access-Control-Allow-Headers: content-type, authorization
Access-Control-Allow-Credentials: true
Access-Control-Max-Age: 600
Vary: Origin

Express örneği

import cors from "cors";
app.use(cors({
  origin: ["https://app.ornek.com", "https://admin.ornek.com"],
  credentials: true,
  maxAge: 600,
}));

Sık hatalar

• Cookie gönderiliyorsa (credentials: true) Access-Control-Allow-Origin: * kullanılamaz; origin açıkça yazılmalıdır.
• Gelen Origin başlığını kontrol etmeden aynen geri yansıtmak, *'dan bile tehlikelidir (her site kullanıcının cookie'siyle API'yi okuyabilir).
• Dinamik origin dönüyorsanız cache'lerin karışmaması için Vary: Origin ekleyin.
• Preflight isteğinin auth middleware'ine takılıp 401 dönmesi; OPTIONS auth'tan önce cevaplanmalıdır.