CORS Hataları: Çözüm İçin Adım Adım Bir Rehber

Web geliştirme dünyasına yeni adım atan bir geliştirici olarak, bir gün karşılaştığınız o karmaşık hatalardan biriyle karşılaşmak kaçınılmaz olacaktır: CORS hatası. Bu hatayı çözmeye çalışırken hissettiklerinizi tahmin edebiliyorum; “Nerede hata yaptım?” “Nasıl düzeltebilirim?” derken, bir yandan bu hatayı Google'da arayarak saatlerce çözüm arıyorsunuz. Ama endişelenmeyin, bu yazımda CORS hatalarının ne olduğunu, neden meydana geldiğini ve nasıl düzeltileceğini ayrıntılı bir şekilde ele alacağız.

Mesela, diyelim ki bir frontend uygulamanız var ve bu uygulama, başka bir domain üzerindeki bir API'den veri çekmeye çalışıyor. İşte burada CORS devreye giriyor. Eğer API, bu istek için uygun CORS başlıklarını göndermiyorsa, tarayıcı güvenlik nedeniyle isteği engeller ve sizin o meşhur CORS hatasını görmenize neden olur. Tarayıcınız şöyle der: "Bu isteği yapamazsınız, çünkü bu istek başka bir kaynağa ait."

1. Yetersiz CORS Başlıkları
Eğer API, gelen istekleri doğru bir şekilde doğrulamayan CORS başlıklarını gönderiyorsa, tarayıcı bu isteği reddeder. Yani, sunucu doğru başlıkları içermiyordur. Örneğin, `Access-Control-Allow-Origin` başlığı eksik olabilir. Bu durumda, sunucu yalnızca belirli bir kaynağa izin verirken, diğer kaynaklardan gelen talepleri engeller.

2. Tarayıcı Güvenlik Politikaları
Tarayıcılar, güvenlik sebepleriyle CORS politikasını sıkı bir şekilde uygular. Bu nedenle, farklı kaynaklardan gelen verilerin otomatik olarak erişilmesine izin vermezler.

#### 1. Sunucu Tarafında CORS Ayarlarını Yapılandırın
Sunucunuzun doğru CORS başlıkları gönderdiğinden emin olun. Genellikle, CORS başlıkları şu şekilde olmalıdır:

```javascript
Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: GET, POST, PUT, DELETE
Access-Control-Allow-Headers: Content-Type, Authorization
```

Burada `Access-Control-Allow-Origin: *` her kaynağa izin verdiğini gösterir. Ancak, daha güvenli bir yaklaşım için sadece belirli bir kaynağa izin vermek de mümkündür. Örneğin:

```javascript
Access-Control-Allow-Origin: https://www.orneksite.com
```

Örnek bir proxy kullanımı:

```javascript
fetch('https://proxy.site.com/api/data', {
method: 'GET',
headers: {
'Content-Type': 'application/json',
},
})
```

### CORS Hatalarını Önlemek İçin İpuçları
1. Sunucu ve İstemci Tarafında Uyumu Sağlayın: API'niz ile web uygulamanızın aynı domain üzerinde olmasına özen gösterin. Aynı domain kullanmak, CORS sorunlarını büyük ölçüde engeller.

2. CORS İzinlerini Sınırlayın: Güvenlik açısından, wildcard (`*`) yerine sadece güvenilir kaynaklara izin vermek her zaman daha sağlıklıdır.

3. Cross-Origin İsteklerde Kimlik Doğrulama Kullanmayın: Cross-Origin isteklerinde kimlik doğrulama (Authentication) kullanmak bazen sorun çıkarabilir. Eğer mümkünse, CORS isteklerinde kimlik doğrulama yapmamaya çalışın.

İşte basit bir CORS hatası çözümü için örnek bir sunucu yapılandırması:

const express = require('express');
const cors = require('cors');
const app = express();

// CORS ayarlarını yapalım
app.use(cors({
    origin: 'https://www.orneksite.com', // Yalnızca bu kaynağa izin ver
    methods: ['GET', 'POST'],
    allowedHeaders: ['Content-Type', 'Authorization'],
}));

app.get('/api/data', (req, res) => {
    res.json({ message: 'CORS sorunsuz!' });
});

app.listen(3000, () => {
    console.log('Sunucu 3000 portunda çalışıyor...');
});

### Sonuç
CORS hataları, web geliştiricilerinin sıklıkla karşılaştığı, ancak doğru adımlar atıldığında kolayca çözülebilen bir sorundur. Sunucu ve istemci tarafındaki doğru yapılandırmalar, hatasız bir şekilde veri almanıza olanak tanır. Bu yazıdaki adımları takip ederek CORS hatalarını çözebilir ve uygulamanızın sorunsuz çalışmasını sağlayabilirsiniz.