Merhaba arkadaşlar, bugün sizlere yeni başlayan frontend geliştirici arkadaşlarımın (ve bazen kendi) başını çok ağrıtan bir konuda, yazdığım küçük bir aracı anlatacağım. CORS (Cross-Origin Resource Sharing) hatası, ilk karşılaştığımda beni de oldukça zorlamıştı. API'den veri çekmeye çalışıyorsunuz, her şey yolunda gibi görünüyor ama tarayıcı o meşhur 'Access-Control-Allow-Origin' hatasını yapıştırıveriyor. Backend henüz hazır değilse veya sadece test etmek istiyorsanız, bu hatayı simüle etmek ve anlamak için basit bir yerel sunucu yazdım.
Neden Böyle Bir Şeye İhtiyaç Duyduk?
Takım arkadaşlarıma CORS'un ne olduğunu ve neden güvenlik için gerekli olduğunu anlatırken, sadece teori yetmiyordu. "Peki ya bu header'lar olmazsa ne olur?" sorusuna, canlı bir örnekle cevap vermek istedim. Ayrıca, geliştirme aşamasında, farklı portlarda çalışan frontend ve backend uygulamalarınız arasında sorunsuz iletişimi test etmek için de kullanışlı oldu.
Basit Node.js Sunucumuzun Yapısı
Temel olarak, Express kullanarak iki farklı portta çalışan iki mini sunucu oluşturdum. Biri "API sunucusu" gibi davranacak, diğeri ise statik dosyalarımızı (HTML, JS) servis edecek. İşte ana sunucu dosyamızın kodu:
Public Klasöründeki Örnek HTML/JS
`public` klasörünün içine bir `index.html` ve `app.js` dosyası koydum. HTML dosyası, farklı bir porttaki (3001) API'mize fetch isteği atıyor.
Sonuç ve Öğrenme Çıktısı
Bu basit ortamı çalıştırdığınızda, ilk butona tıkladığınızda tarayıcı konsolunda net bir CORS hatası göreceksiniz. Daha sonra, API sunucusundaki yorum satırını kaldırıp `Access-Control-Allow-Origin` header'ını eklediğinizde veya proxy yöntemini kullandığınızda sorunun nasıl çözüldüğünü birebir gözlemleyebileceksiniz.
En güzel yanı, bu kodu istediğiniz gibi modifiye edebilirsiniz. Farklı HTTP metodları (POST, PUT), credential gönderimi veya özel header'lar için de CORS kurallarını test edebilirsiniz.
Siz de geliştirme sürecinizde benzer basit test ortamları kuruyor musunuz? CORS dışında, geliştiricilere konseptleri öğretmek için kullandığınız başka pratik araçlar var mı? Yorumlarda paylaşalım!
Neden Böyle Bir Şeye İhtiyaç Duyduk?Takım arkadaşlarıma CORS'un ne olduğunu ve neden güvenlik için gerekli olduğunu anlatırken, sadece teori yetmiyordu. "Peki ya bu header'lar olmazsa ne olur?" sorusuna, canlı bir örnekle cevap vermek istedim. Ayrıca, geliştirme aşamasında, farklı portlarda çalışan frontend ve backend uygulamalarınız arasında sorunsuz iletişimi test etmek için de kullanışlı oldu.
Basit Node.js Sunucumuzun YapısıTemel olarak, Express kullanarak iki farklı portta çalışan iki mini sunucu oluşturdum. Biri "API sunucusu" gibi davranacak, diğeri ise statik dosyalarımızı (HTML, JS) servis edecek. İşte ana sunucu dosyamızın kodu:
JavaScript:
const express = require('express');
const app = express();
const cors = require('cors'); // CORS paketini unutmayın
// 1. PORT: Ana API Sunucumuz (3001)
const apiServer = express();
const API_PORT = 3001;
apiServer.get('/api/data', (req, res) => {
// CORS header'ları OLMADAN yanıt veriyoruz (Hata simülasyonu için)
// res.header('Access-Control-Allow-Origin', 'http://localhost:3000'); // Bu satırı yorum satırı yapın!
res.json({ message: 'Bu veri CORS olmadan geliyor!' });
});
apiServer.listen(API_PORT, () => {
console.log(`[B]API Sunucusu[/B] http://localhost:${API_PORT} üzerinde çalışıyor.`);
});
// 2. PORT: Frontend Dosyalarımızı Sunan Sunucu (3000)
const FRONTEND_PORT = 3000;
// Bu sunucuya CORS middleware'ini ekliyoruz ki, frontend tarafından API'ye yapılan isteklerde sorun çıkmasın.
// app.use(cors()); // Gerektiğinde açabilirsiniz.
app.use(express.static('public')); // 'public' klasöründeki HTML/JS dosyalarını sunar.
app.listen(FRONTEND_PORT, () => {
console.log(`[B]Frontend Sunucusu[/B] http://localhost:${FRONTEND_PORT} üzerinde çalışıyor.`);
console.log(`[COLOR=#E74C3C]Test etmek için: http://localhost:${FRONTEND_PORT}/index.html[/COLOR]`);
});`public` klasörünün içine bir `index.html` ve `app.js` dosyası koydum. HTML dosyası, farklı bir porttaki (3001) API'mize fetch isteği atıyor.
HTML:
<!DOCTYPE html>
<html>
<head>
<title>CORS Test Ortamı</title>
</head>
<body>
<h1>CORS Hatası Simülasyonu</h1>
<button onclick="fetchData()">API'den Veri Çek (CORS Hatası Alacaksın!)</button>
<button onclick="fetchDataWithProxy()">Proxy Üzerinden Veri Çek (Sorunsuz)</button>
<div id="output"></div>
<script src="app.js"></script>
</body>
</html>
JavaScript:
// public/app.js
async function fetchData() {
const output = document.getElementById('output');
output.innerHTML = 'İstek atılıyor...';
try {
// 3001 portundaki API'ye istek atıyoruz. CORS hatası bekliyoruz.
const response = await fetch('http://localhost:3001/api/data');
const data = await response.json();
output.innerHTML = `<b>Başarılı:</b> ${data.message}`;
} catch (error) {
// Tarayıcı konsolunda detaylı hatayı göreceksiniz.
output.innerHTML = `[COLOR=#E74C3C]<b>CORS Hatası Yakalandı:</b> ${error.message}[/COLOR]`;
console.error('Tam hata detayı:', error);
}
}
// CORS hatasını aşmanın bir yolu: Kendi backend'imizde bir proxy endpoint'i oluşturmak.
async function fetchDataWithProxy() {
const output = document.getElementById('output');
output.innerHTML = 'Proxy üzerinden istek atılıyor...';
try {
// Aynı origin'de (3000 portu) çalışan bir proxy route'ına istek atıyoruz.
const response = await fetch('/api/proxy'); // Bu route'ı ana sunucuya (app) eklemeliyiz.
const data = await response.json();
output.innerHTML = `<b>Proxy Başarılı:</b> ${data.message}`;
} catch (error) {
output.innerHTML = `<b>Proxy Hatası:</b> ${error.message}`;
}
}Bu basit ortamı çalıştırdığınızda, ilk butona tıkladığınızda tarayıcı konsolunda net bir CORS hatası göreceksiniz. Daha sonra, API sunucusundaki yorum satırını kaldırıp `Access-Control-Allow-Origin` header'ını eklediğinizde veya proxy yöntemini kullandığınızda sorunun nasıl çözüldüğünü birebir gözlemleyebileceksiniz.
En güzel yanı, bu kodu istediğiniz gibi modifiye edebilirsiniz. Farklı HTTP metodları (POST, PUT), credential gönderimi veya özel header'lar için de CORS kurallarını test edebilirsiniz.
Siz de geliştirme sürecinizde benzer basit test ortamları kuruyor musunuz? CORS dışında, geliştiricilere konseptleri öğretmek için kullandığınız başka pratik araçlar var mı? Yorumlarda paylaşalım!