CORS Nedir?
CORS, yani Cross-Origin Resource Sharing, web tarayıcılarının bir kaynağa (örneğin bir API'ye) başka bir kaynaktan (örneğin başka bir domain) erişmesini kontrol etmek için kullanılan bir güvenlik mekanizmasıdır. Amaç, kötü niyetli sitelerin, başka bir siteye ait verilere izinsiz erişimini engellemektir. Yani CORS, bir tür güvenlik duvarıdır, ama bazen bu duvar yanlış alarm verir ve işinize engel olur.
Bazen bu hata, sizin uygulamanızın başına gelen bir "tanıdık" problem olabilir. Örneğin, "Access to XMLHttpRequest at 'http://xyz.com/api' from origin 'http://abc.com' has been blocked by CORS policy" gibi bir hata mesajı alırsınız. Bu yazımızda, CORS hatasını anlamaya ve nasıl çözeceğinize odaklanacağız.
CORS Hatası Ne Zaman Karşımıza Çıkar?
Bir CORS hatası genellikle şu durumda karşımıza çıkar:
- Web tarayıcınızda, kendi domain'inizden (örneğin, http://localhost) başka bir domain'e (örneğin, https://api.example.com) istek gönderdiğinizde, eğer hedef sunucu CORS politikasını doğru şekilde yapılandırmamışsa, tarayıcı bu isteği engeller.
- API sunucusu, gelen isteğin hangi domain'den geldiğini kontrol eder ve bu domain'e izin verip vermemeye karar verir. Eğer izin verilmiyorsa, işte CORS hatası burada devreye girer.
CORS Hatası Nasıl Çözülür?
Şimdi bu hatayı çözmek için neler yapabileceğimizi görelim. Adım adım gideceğiz.
Adım 1: Sunucuyu CORS'a Açmak
Öncelikle, API'nizin bulunduğu sunucunun CORS politikasını doğru şekilde yapılandırmak önemlidir. Sunucu, gelen isteklere izin veren HTTP başlıkları eklemelidir. İşte basit bir örnek:
const express = require('express');
const app = express();
// CORS middleware'ini ekleyin
const cors = require('cors');
app.use(cors());
// API route'ları burada
app.get('/api', (req, res) => {
res.send('CORS Hatası Çözülmüş!');
});
Yukarıdaki kodda, Express.js kullanarak CORS hatasını nasıl çözebileceğimizi gördük. CORS middleware'ini dahil etmek, farklı domain'lerden gelen istekleri kabul etmenizi sağlar.
Adım 2: Özel CORS Yapılandırması
Bazen tüm domain'leri açmak yerine, sadece belirli domain'lere izin vermek isteyebilirsiniz. Örneğin, sadece `http://mywebsite.com` adresinden gelen isteklere izin vermek istiyorsanız, şu şekilde yapılandırabilirsiniz:
const corsOptions = {
origin: 'http://mywebsite.com',
methods: ['GET', 'POST'],
};
app.use(cors(corsOptions));
Burada, sadece belirtilen domain'den gelen GET ve POST isteklerine izin veriyoruz.
Tarayıcı Tarafında Çözüm
CORS hatalarını yalnızca sunucu tarafında çözmek yeterli olmayabilir. Bazen tarayıcıda da bu hatalarla karşılaşabilirsiniz. Bu durumda şu çözümleri deneyebilirsiniz:
Adım 3: Tarayıcı Eklentilerini Kullanın
Eğer geliştirme aşamasındaysanız ve CORS hatalarıyla sıkça karşılaşıyorsanız, tarayıcınızda CORS geçici çözümleri sağlayan eklentiler kullanabilirsiniz. Chrome için "CORS Unblock" gibi eklentiler, geçici olarak CORS politikalarını geçersiz kılarak hataları engelleyebilir.
Adım 4: Proxy Kullanmak
Eğer sadece frontend tarafında çalışıyorsanız ve backend'e erişim hakkınız yoksa, proxy kullanabilirsiniz. API isteklerinizi yerel bir proxy sunucu üzerinden yönlendirerek, CORS hatalarını aşabilirsiniz.
CORS Hatasını Önlemek İçin İpuçları
CORS hatalarını engellemek için bazı temel ipuçları:
1. CORS başlıklarını doğru ayarlayın: API sunucunuzun doğru CORS başlıkları gönderdiğinden emin olun. Bu, tarayıcının güvenlik duvarını aşmak için gereklidir.
2. API'yi doğru yapılandırın: API'nin sadece güvendiğiniz kaynaklardan gelen isteklere yanıt verdiğinden emin olun.
3. Tarayıcı cache'ini temizleyin: Bazen eski CORS politikaları cache'lenebilir, bu da hataya yol açar. Tarayıcı cache'ini temizlemeyi unutmayın.
4. Özel proxy kullanın: Özellikle geliştirme aşamasında proxy kullanarak bu hatayı geçici olarak çözebilirsiniz.
