CORS Hatası Neden Çıkıyor? HTTP Başlıklarındaki Access-Control-Allow-Origin Eksikliğini Bulma

Günümüzün dinamik ve etkileşimli web dünyasında, farklı kaynaklardan veri ve içerik çekmek neredeyse her uygulamanın ayrılmaz bir parçası haline gelmiştir. Ancak bu esneklik, beraberinde önemli güvenlik endişelerini de getirmektedir. İşte tam bu noktada, web tarayıcılarının uyguladığı Sitemler Arası Kaynak Paylaşımı (CORS - Cross-Origin Resource Sharing) politikası devreye girer. Birçok geliştiricinin karşılaştığı ve çözüm aradığı en yaygın sorunlardan biri olan CORS hatası, genellikle HTTP yanıt başlıklarında yer alan `Access-Control-Allow-Origin` başlığının yanlış veya eksik yapılandırılmasından kaynaklanır. Bu makalede, bu hatanın nedenlerini derinlemesine inceleyecek, nasıl tespit edeceğimizi ve çözüme kavuşturacağımızı adım adım anlatacağız. Özellikle bir HTTP Header Görüntüleyici aracının bu süreçteki kritik rolünü vurgulayacağız.

Sitemler Arası Kaynak Paylaşımı (CORS) Nedir ve Neden Gereklidir?

Web'in temel güvenlik mekanizmalarından biri olan Aynı Köken Politikası (Same-Origin Policy - SOP), bir web sayfasının, yüklendiği köken (protokol, alan adı ve port üçlüsü) dışındaki bir kökenden kaynak yüklemesini kısıtlar. Örneğin, `https://example.com` adresinden yüklenen bir JavaScript kodu, doğrudan `https://api.harici.com` adresindeki bir API'ye istek göndererek yanıtı okuyamazdı. Bu politika, kötü niyetli web sitelerinin kullanıcı verilerini ele geçirmesini, oturum bilgilerini çalmasını veya kullanıcının izni olmadan başka sitelerde işlemler yapmasını engellemek için tasarlanmıştır.
Ancak modern web uygulamaları, mikro hizmet mimarileri ve API tabanlı sistemler, farklı kökenlerden kaynaklara (fontlar, resimler, scriptler, veriler) erişme ihtiyacı duyar. İşte bu noktada CORS, SOP'nin katı kurallarını kontrollü bir şekilde esnetmek için bir mekanizma sunar. CORS, sunucuların, kendilerine yapılan çapraz köken isteklerine yanıt verirken, hangi kökenlerin belirli kaynaklara erişebileceğini belirtmesine olanak tanır. Tarayıcılar da bu başlıkları kontrol ederek, isteğin güvenli olup olmadığına karar verir. Dolayısıyla, web güvenliği açısından hayati bir öneme sahiptir.

Aynı Köken Politikası'nın Temelleri

Aynı Köken Politikası, web tarayıcılarının uyguladığı temel bir güvenlik konseptidir. Bir URL'nin "kökeni", protokolü (örneğin, `http`, `https`), alan adını (örneğin, `example.com`) ve port numarasını (örneğin, `80`, `443`, `8080`) içerir. Eğer iki URL'nin bu üç bileşeni de tam olarak aynıysa, "aynı kökenden" kabul edilirler. SOP'nin amacı, bir web sayfasından kaynaklanan kötü niyetli scriptlerin, kullanıcının oturum açtığı diğer sitelerdeki verilere erişmesini veya bu siteler üzerinde işlem yapmasını engellemektir. Bu, kullanıcıların kişisel bilgilerinin, bankacılık verilerinin veya diğer hassas verilerinin korunmasında kritik bir rol oynar. Ancak, modern web geliştirmenin ihtiyaçları doğrultusunda, kontrollü çapraz köken iletişiminin mümkün olması gerekmektedir; CORS tam da bu ihtiyacı karşılar.

Access-Control-Allow-Origin Başlığı ve CORS Hataları

Bir CORS hatası genellikle aşağıdaki senaryo üzerinden ortaya çıkar:
1. Bir web sayfası (`https://uygulamam.com`), farklı bir kökenden (`https://api.baskasi.com`) bir kaynak (örneğin, bir API endpoint'i) talep eder.
2. Tarayıcı, bu isteği sunucuya gönderir. İstekle birlikte, tarayıcı otomatik olarak `Origin` başlığını da gönderir. Bu başlık, isteği yapan web sayfasının kökenini (bu örnekte `https://uygulamam.com`) içerir.
3. Sunucu (`https://api.baskasi.com`), bu isteği işler ve bir yanıt döner. Eğer sunucu, `https://uygulamam.com` kökeninin kendi kaynaklarına erişmesine izin veriyorsa, yanıtın HTTP başlıklarına `Access-Control-Allow-Origin: https://uygulamam.com` şeklinde bir başlık eklemelidir.
4. Tarayıcı, sunucudan gelen yanıtı alır ve yanıt başlıklarındaki `Access-Control-Allow-Origin` değerini kontrol eder.
* Eğer bu başlık eksikse,
* Ya da başlığın değeri, isteği yapan `Origin` başlığıyla eşleşmiyorsa (örneğin, sunucu `https://baskasi.com` değerini döndürüyor veya sadece tek bir kökene izin verip, sizin kökeninizi listelemiyorsa),
* Ya da değer `*` (tüm kökenlere izin ver) ise ve istek kimlik bilgileri (cookie'ler, HTTP kimlik doğrulama) ile yapılıyorsa (bu durumda `*` kullanılamaz),
tarayıcı, güvenlik nedeniyle yanıtı JavaScript'e iletmeyi reddeder ve bir CORS hatası fırlatır.
Bu hata, geliştirici konsolunda "Cross-Origin Request Blocked..." veya benzeri mesajlarla kendini gösterir. Bu durum, sunucunun beklendiği gibi `Access-Control-Allow-Origin` başlığını göndermediği veya yanlış bir değerle gönderdiği anlamına gelir.

`Access-Control-Allow-Origin` Başlığının Değerleri

`Access-Control-Allow-Origin` başlığı genellikle üç farklı değer alabilir:
1. Belirli Bir Köken: `Access-Control-Allow-Origin: https://uygulamam.com`
* Bu, sadece `https://uygulamam.com` kökeninden gelen isteklerin başarılı olacağını belirtir. En güvenli yaklaşımdır.
2. Joker Karakter (`*`): `Access-Control-Allow-Origin: *`
* Bu, herhangi bir kökenden gelen isteklere izin verildiği anlamına gelir. Geliştirme ortamlarında veya herkese açık, hassas olmayan verilere erişim sağlayan API'lerde kullanılabilir. Ancak, kimlik bilgileri (çerezler, HTTP kimlik doğrulaması vb.) içeren isteklerle birlikte `*` kullanılamaz. Eğer kimlik bilgileri ile bir istek yapılıyorsa ve sunucu `*` gönderirse, tarayıcı yine bir CORS hatası verir. Bu durumda, sunucunun `Access-Control-Allow-Credentials: true` başlığını da göndermesi gerekir, ancak `Access-Control-Allow-Origin` için `*` yerine belirli bir köken belirtilmelidir.
3. İstek Kökeni: Eğer sunucu, gelen `Origin` başlığını okuyup birebir aynı değeri `Access-Control-Allow-Origin` başlığı olarak geri döndürüyorsa, bu da geçerli bir yaklaşımdır.

CORS Hatalarını Tespit Etmede HTTP Header Görüntüleyici Kullanımı

Bir CORS hatasıyla karşılaştığınızda, sorunun kaynağını bulmak için en etkili araçlardan biri tarayıcınızın geliştirici araçlarıdır. Özellikle "Ağ" (Network) sekmesi, giden ve gelen tüm HTTP başlıkları hakkında paha biçilmez bilgiler sunar.
İşte bir HTTP Header Görüntüleyici aracını (tarayıcınızın geliştirici araçları veya bir üçüncü taraf eklentisi olabilir) kullanarak `Access-Control-Allow-Origin` eksikliğini nasıl bulacağınız:
1. Geliştirici Araçlarını Açın: Problem yaşadığınız web sayfasını açın ve F12 tuşuna basarak veya sağ tıklayıp "İncele" seçeneğini seçerek geliştirici araçlarını açın.
2. "Ağ" (Network) Sekmesine Gidin: Bu sekme, sayfa yüklenirken veya JavaScript tarafından yapılan tüm HTTP isteklerini listeler.
3. Hatalı İsteği Bulun: CORS hatasına neden olan API çağrısını veya kaynak isteğini bulun. Genellikle, bu istekler kırmızı renkle işaretlenir veya "Durum" (Status) sütununda başarısızlık kodu (örneğin, 4xx, 5xx) gösterir. Bazen durum kodu 200 (başarılı) olsa bile, tarayıcı CORS hatası verebilir, çünkü tarayıcı yanıtı almış ama güvenlik nedeniyle JavaScript'e iletmemiştir.
4. İsteğin Detaylarını İnceleyin: Hatalı isteğe tıklayın. Sağda veya aşağıda, isteğin detaylarını gösteren bir panel açılacaktır.
5. "Başlıklar" (Headers) Sekmesini Kontrol Edin: Bu panelde "Başlıklar" sekmesine gidin.
* İstek Başlıkları (Request Headers): Burada, tarayıcınızın sunucuya gönderdiği `Origin` başlığını göreceksiniz. Bu, sunucunun `Access-Control-Allow-Origin` değerini karşılaştırması gereken kökendir.
* Yanıt Başlıkları (Response Headers): Burası asıl inceleme yapacağınız yerdir. Sunucudan gelen `Access-Control-Allow-Origin` başlığını arayın.
* Eksik mi? Eğer bu başlık listede yoksa, sunucunuz CORS'u doğru yapılandırmamış demektir.
* Yanlış mı? Eğer başlık varsa ancak değeri tarayıcının gönderdiği `Origin` başlığıyla eşleşmiyorsa (veya `*` olup kimlik bilgisiyle yapılıyorsa), yine bir yapılandırma sorunu vardır.
* Değeri `null` mı? Bazı durumlarda `null` değeri döndürülebilir, bu da genellikle sunucu tarafında bir hataya işaret eder.
Bu incelemeler sayesinde, HTTP başlıkları içerisinde aradığınız `Access-Control-Allow-Origin` başlığının varlığını veya doğru yapılandırılıp yapılandırılmadığını net bir şekilde görebilirsiniz.

Ön Kontrol (Preflight) İstekleri

Bazı karmaşık çapraz köken istekleri (örneğin, `PUT`, `DELETE` gibi HTTP metotları kullanan istekler, veya `Content-Type` gibi standart dışı başlıklar içeren istekler), asıl isteği göndermeden önce "ön kontrol" (preflight) adı verilen bir `OPTIONS` isteği gönderir. Tarayıcı, `OPTIONS` isteği ile sunucuya, asıl isteğin güvenli bir şekilde gönderilip gönderilemeyeceğini sorar. Sunucunun bu `OPTIONS` isteğine `Access-Control-Allow-Origin`, `Access-Control-Allow-Methods`, `Access-Control-Allow-Headers` ve `Access-Control-Max-Age` gibi CORS başlıklarıyla yanıt vermesi gerekir. Eğer ön kontrol isteği başarısız olursa (örneğin, sunucu `OPTIONS` metodunu desteklemiyorsa veya yanıtı doğru CORS başlıklarını içermiyorsa), asıl istek hiçbir zaman gönderilmez ve yine bir CORS hatası alırsınız. Bu durumda da Network sekmesinde `OPTIONS` isteğinin yanıt başlıklarını kontrol etmek önemlidir.

Sunucu Tarafı Yapılandırması: Çözüm Yolları

CORS hatasını çözmenin anahtarı, genellikle sunucuyu doğru şekilde yapılandırmaktan geçer. Sunucunuzun kullandığı teknolojiye veya web sunucusuna (Apache, Nginx vb.) bağlı olarak farklı yapılandırmalar gerekebilir. Burada genel yaklaşımları özetleyeceğiz:

1. Belirli Bir Kökeni İzin Verme

En güvenli yöntem, yalnızca belirli kökenlere izin vermektir. Bu, sunucunuzun `Origin` başlığını kontrol etmesini ve sadece bilinen, güvenilir kökenlerden gelen isteklere `Access-Control-Allow-Origin` başlığını göndermesini sağlar.
* Apache Sunucuları İçin (`.htaccess` veya `httpd.conf`):
```

SetEnvIf Origin "^(https?://(www\.)?(uygulamam\.com))$" ACAO=$0
Header set Access-Control-Allow-Origin %{ACAO}e env=ACAO
Header always set Access-Control-Allow-Methods "GET, POST, OPTIONS"
Header always set Access-Control-Allow-Headers "Content-Type, Authorization, X-Requested-With"

```
Bu örnekte, `uygulamam.com` kökenine izin verilmiştir.
* Nginx Sunucuları İçin (`nginx.conf`):
```nginx
location / {
if ($request_method = 'OPTIONS') {
add_header 'Access-Control-Allow-Origin' 'https://uygulamam.com';
add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
add_header 'Access-Control-Allow-Headers' 'Content-Type, Authorization';
add_header 'Access-Control-Max-Age' 1728000;
add_header 'Content-Type' 'text/plain charset=UTF-8';
add_header 'Content-Length' 0;
return 204;
}
add_header 'Access-Control-Allow-Origin' 'https://uygulamam.com';

Diğer proxy_pass veya kök konfigürasyonları...

}
```
Nginx'te `OPTIONS` istekleri için özel bir blok tanımlamak yaygın bir yaklaşımdır.
* Node.js (Express) İçin:
Bir `cors` middleware paketi kullanmak en basit yöntemdir:
```javascript
const express = require('express');
const cors = require('cors');
const app = express();
app.use(cors({
origin: 'https://uygulamam.com', // Sadece bu kökene izin ver
methods: 'GET,HEAD,PUT,PATCH,POST,DELETE',
credentials: true, // Kimlik bilgileri ile istek yapılmasına izin ver
optionsSuccessStatus: 204
}));
// Diğer route'larınız
app.get('/api/data', (req, res) => {
res.json({ message: 'Hello from API!' });
});
app.listen(3000, () => {
console.log('Server running on port 3000');
});
```

2. Tüm Kökenlere İzin Verme (Dikkatli Kullanın!)

Sadece geliştirme ortamında veya halka açık, hassas olmayan veriler sunan API'ler için `Access-Control-Allow-Origin: *` kullanılabilir. Ancak, kimlik bilgileri (cookie, authorization header) içeren isteklerde bu başlık *kullanılamaz*.
* Apache: `Header always set Access-Control-Allow-Origin "*"`
* Nginx: `add_header 'Access-Control-Allow-Origin' '*';`
* Node.js (Express): `app.use(cors());` (varsayılan olarak tüm kökenlere izin verir)

3. Dinamik Köken Yönetimi

Bazı durumlarda, izin verilen kökenlerin dinamik olarak belirlenmesi gerekebilir (örneğin, bir liste veya veritabanından okuyarak). Bu, özellikle çoklu istemci uygulamalarınız olduğunda kullanışlıdır. Sunucu, gelen `Origin` başlığını kontrol eder ve eğer izin verilenler listesindeyse, bu `Origin` değerini `Access-Control-Allow-Origin` başlığı olarak yanıt başlıklarına ekler.
Bu sunucu yapılandırması değişiklikleri, genellikle web sunucusunun veya uygulamanın yeniden başlatılmasını gerektirebilir. Değişiklikleri yaptıktan sonra, tarayıcınızın geliştirici araçlarındaki HTTP Header Görüntüleyici ile tekrar kontrol ederek `Access-Control-Allow-Origin` başlığının doğru şekilde gönderildiğinden emin olun.
Daha geniş web güvenliği konularına göz atmak isterseniz, `/makale.php?sayfa=web-guvenligi-temelleri` adresindeki makalemize de bakabilirsiniz.

Sonuç

CORS hatası, modern web geliştirmenin kaçınılmaz bir parçasıdır ve genellikle `Access-Control-Allow-Origin` başlığının sunucu tarafında eksik veya yanlış yapılandırılmasından kaynaklanır. Bu hataları anlamak ve çözmek için HTTP Header Görüntüleyici gibi araçlar vazgeçilmezdir. Geliştirici araçlarındaki Ağ sekmesini kullanarak istek ve yanıt başlıklarını dikkatlice incelemek, sorunun kökenini tespit etmenin en hızlı yoludur.
Unutmayın, CORS sadece bir hatadan ibaret değildir; web uygulamalarınızın güvenliğini sağlayan temel bir mekanizmadır. Bu nedenle, sunucu yapılandırmasını yaparken en iyi güvenlik uygulamalarını takip etmek, yani mümkünse `*` yerine belirli kökenlere izin vermek her zaman tercih edilmelidir. Doğru yapılandırma ile hem uygulamanızın güvenliğini sağlamış hem de kullanıcılarınıza kesintisiz bir deneyim sunmuş olursunuz. HTTP protokolü hakkında daha fazla bilgi edinmek için `/makale.php?sayfa=http-protokolu-nedir` başlıklı içeriğimize göz atabilirsiniz.