Tarayıcıda CORS hatası: nedenleri ve geliştiriciler için çözümler

Sorun nasıl anlaşılır

• Tarayıcı konsolunda şu yazar: "Access to fetch at ... has been blocked by CORS policy"
• API çağrısı Postman veya curl'de çalışır ancak tarayıcıda çalışmaz
• Ağ isteği Network sekmesinde 0 veya (failed) durumundadır
• Yalnızca yerel geliştirme sunucusunda görünür, üretimde görünmez
• Yeni bir alan adı veya alt alan adı eklendikten sonra hata oluşur

En yaygın nedenler

Adım adım çözüm

1. 1

   Tarayıcıda tam origin'i kontrol edin

   DevTools'u (F12) açın ve konsola location.origin yazın. Tam değeri not edin, örneğin http://localhost:3000. Network sekmesinde başarısız isteği bulun ve istek ile yanıt başlıklarını inceleyin. İstekteki Origin ve yanıttaki Access-Control-Allow-Origin başlıklarına dikkat edin.

2. 2

   Sunucuda CORS'u yapılandırın

   Backend'de frontend'in origin'ine açıkça izin verin. Node.js/Express'te: app.use(cors({ origin: 'http://localhost:3000', credentials: true })). Spring Boot'ta: @CrossOrigin(origins = "http://localhost:3000") veya genel yapılandırma. ASP.NET Core'da: builder.Services.AddCors(...) ve app.UseCors(...). Kimlik bilgileri kullanıyorsanız her zaman tam origin belirtin, * kullanmayın.

3. 3

   OPTIONS preflight isteğini işleyin

   Sunucunun OPTIONS isteğine Access-Control-Allow-Methods ve Access-Control-Allow-Headers başlıklarıyla 204 veya 200 döndürdüğünü kontrol edin. Express'te cors ara yazılımı bunu otomatik yapar. Nginx'te add_header Access-Control-Allow-Origin ... ve if ($request_method = OPTIONS) { return 204; } ekleyin.

4. 4

   Yerel geliştirme sırasında proxy kullanın

   Sunucuyu değiştiremiyorsanız, geliştirme aracında proxy yapılandırın. Vite'ta: vite.config.js içinde server.proxy. Create React App'te: package.json içinde proxy alanı. Ardından tam URL yerine göreli yoldan (/api/...) API'yi çağırın.

5. 5

   Üretimde CORS'tan kaçının

   En iyi çözüm, frontend ve API'nin aynı origin'de (aynı alan adı ve bağlantı noktası) olmasıdır. Değilse, /api yolunu backend'e ileten bir ters proxy kullanın. Böylece tarayıcı cross-origin istek göndermez.

6. 6

   Proxy ve barındırma yapılandırmasını kontrol edin

   Nginx, Apache veya bulut barındırma kullanıyorsanız, CORS başlıklarını kaldırmadıklarından emin olun. Nginx'te doğru düzeyde proxy_pass ve add_header kullanın. Sunucusuz platformlarda (Vercel, Netlify) fonksiyonların yanıt başlıklarında veya ilgili yapılandırmada CORS'u ayarlayın.

7. 7

   curl ile test edin

   Preflight'ı simüle edin: curl -i -X OPTIONS http://localhost:8080/api/podaci -H "Origin: http://localhost:3000" -H "Access-Control-Request-Method: GET". Yanıtın Access-Control-Allow-Origin ve Access-Control-Allow-Methods içerip içermediğini kontrol edin. İçermiyorsa sorun sunucudadır.

8. 8

   Önbelleği temizleyin ve yeniden yükleyin

   Tarayıcılar preflight yanıtlarını Access-Control-Max-Age başlığına göre önbelleğe alabilir. Süresinin dolmasını bekleyin, tarayıcıyı yeniden başlatın veya sunucuda bu değeri geçici olarak azaltın. DevTools'ta "Disable cache" seçeneğini etkinleştirin ve sayfayı yenileyin. Bazen yapılandırma değişikliklerinin uygulanması için geliştirme sunucusunu yeniden başlatmak gerekir.

Hiçbir şey yardımcı olmazsa: gelişmiş kontroller

Tekrarlanmaması için

• Sunucu yapılandırmasında izin verilen origin listesini tanımlayın ve her alan adı değişikliğinde güncelleyin.
• Mümkün olan her yerde frontend ve API için aynı origin'i veya ters proxy kullanın.
• Yayınlamadan önce CORS davranışını otomatik testler veya curl ile test edin.
• Kimlik bilgileri kullanırken `Access-Control-Allow-Origin` için `*` kullanmaktan kaçının.

Sık sorulan sorular