CORS Hatalarıyla Mücadele: Web Geliştiricilerin Kâbusu mu, Yoksa Çözümü Kolay Bir Sorun mu?

CORS Nedir ve Neden Önemlidir?

Web dünyasında gezinirken, bazen “CORS hatası” adlı bir canavarla karşılaşırız. Peki, bu CORS tam olarak nedir? Aslında CORS, yani Cross-Origin Resource Sharing, tarayıcıların bir güvenlik mekanizmasıdır. Basitçe söylemek gerekirse, bir web sayfası kendi alanı dışındaki başka bir kaynağa erişmek istediğinde ortaya çıkar. Tarayıcı, “Hey, bu isteği yapmana izin var mı?” diye sorar. Eğer sunucu doğru izinleri vermezse, işte o zaman “CORS hatası” ile karşılaşırsınız.

Biraz Hikaye: CORS Hatası İlk Defa Karşımıza Çıktığında

Düşünün ki bir gün, kendi yaptığınız harika web uygulamasına, dış bir API’den veri çekmek istiyorsunuz. Kodlarınızı yazdınız, heyecanla sayfayı yenilediniz... ama ekranda “Access to XMLHttpRequest at 'https://api.ornek.com' from origin 'https://siteniz.com' has been blocked by CORS policy” yazıyor. İşte o an anlarsınız, CORS ile tanıştınız!

CORS Hatalarının En Yaygın Sebepleri

• Sunucu Tarafında Eksik İzinler: Sunucu, gelen isteği uygun Access-Control-Allow-Origin başlığıyla onaylamıyor.


• Yanlış HTTP Metodu: Özellikle PUT, DELETE gibi yöntemlerde ön uçtan (preflight) kontrol gerekir, bu sağlanmazsa hata oluşur.


• Yanlış Header Kullanımı: İstek başlıklarında kullanılan özel başlıklar sunucu tarafından izin verilmelidir.

CORS Hatalarını Nasıl Çözebiliriz?

Çözümün anahtarı genellikle sunucu tarafında gizlidir. Örneğin, Node.js Express sunucusunda CORS izinlerini ayarlamak için şu kodu kullanabilirsiniz:

const express = require('express');  
const cors = require('cors');  
const app = express();  
  
app.use(cors({  
  origin: 'https://siteniz.com', // İzin verilen domain  
  methods: ['GET', 'POST', 'PUT', 'DELETE'],  
  allowedHeaders: ['Content-Type', 'Authorization']  
}));  
  
app.get('/api/data', (req, res) => {  
  res.json({ message: 'CORS artık sorun değil!' });  
});  
  
app.listen(3000, () => console.log('Sunucu çalışıyor...'));  

Eğer kendi API’niz yoksa ve sadece dış API’lerden veri çekiyorsanız, proxy kullanmak da bir çözüm olabilir. Böylece tarayıcıya doğrudan cross-origin istek yapmaz, kendi sunucunuz üzerinden istekler yönlendirilir.

CORS Hatalarından Kaçınmak İçin İpuçları

• İzinleri Net Belirleyin: Sunucunuzda hangi domainlerin erişebileceğini kesin olarak belirleyin.


• Preflight İsteklerini Unutmayın: Karmaşık isteklerde preflight taleplerinin karşılanması gerekiyor.


• Geliştirme Sürecinde Proxy Kullanın: Local geliştirmede proxy ile CORS sorunlarını kolayca aşabilirsiniz.


• Tarayıcı ve Sunucu Loglarını Kontrol Edin: Hangi adımda sorun olduğunu tespit etmek için logları inceleyin.

Son Söz

CORS hataları, ilk başta göz korkutucu olabilir ama aslında web güvenliği için çok önemli bir unsur. Biraz sabır ve doğru çözümlerle bu canavarı evcilleştirmek mümkün. Unutmayın, her hata aslında size yeni bir şey öğretmek için oradadır. CORS ile dans etmeyi öğrenin, web geliştirme yolculuğunuz çok daha keyifli olacak!

Aklınızda bulunsun, bazen basit bir Access-Control-Allow-Origin başlığı, tüm dünyayı değiştirebilir.