Vay be, ne günlerdi! Hatırlıyorum da, bundan birkaç yıl önce, ilk defa bir projede React ile Node.js’i birbirine bağlamaya çalışırken başıma gelmeyen kalmamıştı. Sanki iki farklı dilde konuşan insanları bir araya getirmeye çalışıyordum, ama neyse ki sonunda başardık. O zamanlar bu CORS denen illetin ne olduğunu bile tam anlamıyordum açıkçası. Sadece karşıma çıkan kırmızı hatalarla boğuşuyordum resmen. Hani vardır ya, bir şeyi yapmaya çalışırsın ama sürekli bir engel çıkıyordur, işte tam olarak öyle bir durumdu benim için. Şimdi dönüp bakınca gülüyorum ama o anlar biraz can sıkıcıydı tabi 🙂
Neyse efendim, gelelim konumuza. Frontend ve backend arasındaki o meşhur savaşın en büyük sebeplerinden biri bu CORS denen lanet olası şey. Adı da güzel, Cross-Origin Resource Sharing yani ‘Çapraz Kaynak Kaynak Paylaşımı’. Kulağa hoş geliyor değil mi? Ama işin içine girince pek de öyle olmuyor maalesef. Temelde bu, bir web sayfasının, farklı bir domainden, porttan veya protokolden gelen kaynaklara erişimini kontrol eden bir mekanizma. Yani güvenlik için konulmuş bir önlem diyebiliriz ama geliştiriciler için bazen bir kabusa dönüşebiliyor.
Şimdi şöyle düşünün: Siz bir ev sahibisiniz, eviniz de backend sunucunuz. Kapınızın önünde de komşunuzun çocuğu var, o da frontend. Çocuk gelip bahçenizdeki oyuncağı almak istiyor. Normalde siz ‘Alabilirsin!’ dersiniz, sorun yok. Ama güvenlik önlemi olarak diyorsunuz ki, ‘Sadece benim komşumun çocuğu, benim verdiğim izinle, benim belirlediğim saatte alabilir.’ İşte CORS da tam olarak böyle bir şey yapıyor tarayıcılar üzerinden. Tarayıcı, frontend’in backend’den bir istek yapmasını istiyor. Backend de diyor ki, ‘Dur bakalım, bu istek nereden geldi? Benim izin verdiğim bir yerden mi? Evetse tamam, yoksa ‘Hooop!’ diye geri çeviriyorum.’
Peki bu neden oluyor? Genellikle, frontend’iniz bir domainde (örneğin `http://localhost:3000`) çalışırken, backend’iniz başka bir adreste (mesela `http://localhost:5000` veya `https://api.benimsite.com`) barınıyor. Tarayıcı da bu iki farklı ‘origin’ (kaynak) arasında doğrudan iletişim kurmaya çalıştığında, ‘Dur, bu normal değil!’ diyor ve CORS hatası veriyor. En sık karşılaştığımız hata mesajı da ‘Access to fetch at ‘…’ from origin ‘…’ has been blocked by CORS policy.’ şeklinde oluyor. Gerçekten de bir blokaj söz konusu.
Bu hatayı çözmenin birkaç yolu var tabi. En yaygın ve aslında doğru yöntemlerden biri, backend tarafında gerekli CORS ayarlarını yapmaktır. Yani backend sunucunuza gelen isteğin hangi domainlerden, hangi metotlarla (GET, POST vb.) ve hangi başlıklarla (headers) kabul edileceğini belirtmeniz gerekiyor. Bu genellikle Node.js’te Express framework’ü ile çok basit bir şekilde hallediliyor. Mesela, `cors` adında bir middleware kullanabilirsiniz.
Hani bazen bir şeyi düzeltmek için birkaç farklı yol deneriz ya, işte bu da öyle. Mesela, bazen frontend’de bir proxy ayarı yaparak bu sorunu geçici olarak aşabilirsiniz. Ama bu tam bir çözüm değil, sadece geliştirme aşamasında işinizi kolaylaştırır. Asıl çözüm backend’de.
Şimdi gelelim kod kısmına. Bu işi Node.js ile nasıl yapıyoruz, bir bakalım. Varsayalım ki bir Express sunucunuz var ve bu sunucuya bir frontend uygulamasından istek geliyor. Normalde böyle bir istek geldiğinde, eğer CORS ayarları yapılmamışsa, tarayıcı bu isteği engeller. Ama biz şimdi bunu düzelteceğiz.
Öncelikle, projenize `cors` paketini yüklemeniz lazım. Bunu terminalde şu komutla yapıyorsunuz:
npm install corsSonra da Express uygulamanızda bu paketi kullanıyorsunuz. İşte basit bir örnek:
// server.js (veya ana Express dosyanız)const express = require('express'); const cors = require('cors'); // cors paketini dahil et const app = express(); const port = 5000; // Backend portu
//cors middleware'ini global olarak kullan app.use(cors());
// Veya sadece belirli bir origin'e izin vermek isterseniz: /* const corsOptions = { origin: 'http://localhost:3000', // Frontend'inizin çalıştığı adres optionsSuccessStatus: 204 // Bazı eski tarayıcılar için gerekli olabilir }; app.use(cors(corsOptions)); */
// Basit bir API endpoint'i app.get('/api/mesaj', (req, res) => { res.json({ mesaj: 'Merhaba Frontend, ben Backend!' }); });
app.listen(port, () => { console.log(`Backend sunucusu http://localhost:${port} adresinde çalışıyor`); });
Bakın, ne kadar basit değil mi? Sadece `app.use(cors());` satırını ekledik ve işin büyük kısmı bitti. Bu, sunucunuzun tüm domainlerden gelen istekleri kabul etmesini sağlar. Eğer daha güvenli bir yaklaşım isterseniz, yukarıdaki yorum satırlarında da görüldüğü gibi, `corsOptions` objesiyle sadece belirli bir origin’e izin verebilirsiniz. Mesela, sizin frontend uygulamanız `http://localhost:3000`’de çalışıyorsa, sadece bu adresten gelen isteklere izin verirsiniz. Bu, özellikle production ortamında çok önemli.
Peki ya frontend tarafında Vue.js gibi bir framework kullanıyorsanız? Orada da işler benzer aslında. Genellikle `axios` gibi bir HTTP kütüphanesiyle istek yaparsınız. Eğer backend’de CORS ayarları doğru yapılmışsa, siz frontend’de ekstra bir şey yapmanıza gerek kalmaz. Ama eğer backend ayarlarında bir sorun varsa, tarayıcı yine hata verecektir. Yani işin özü her zaman backend’de bitiyor, bana göre.
Bu CORS meselesi, özellikle yeni başlayan geliştiriciler için kafa karıştırıcı olabiliyor. Hani geçenlerde bir arkadaşım anlatıyordu, bir projede bir türlü çalıştıramamış. Günlerce uğraşmış, en sonunda backend’de sadece bir satır kod eksik olduğunu fark etmiş. Ne komik değil mi? İşte bazen çözümler bu kadar basit olabiliyor, sadece doğru yere bakmak gerekiyor.
Sonuç olarak, CORS bir hata değil, bir güvenlik önlemi. Bu yüzden onu ortadan kaldırmaya çalışmak yerine, doğru şekilde yapılandırmayı öğrenmek en mantıklısı. Backend tarafında `cors` middleware’ini doğru ayarlayarak bu sorunu kolayca çözebilirsiniz. Unutmayın, her zaman backend’in kapılarını doğru şekilde açmak lazım.
Bir de şu var tabi, bazen bu ayarları yaptıktan sonra bile tarayıcı önbelleği yüzünden eski hataları görmeye devam edebilirsiniz. O durumda tarayıcınızın önbelleğini temizlemek veya farklı bir tarayıcıda denemek de faydalı olabilir. Yani şey gibi, bazen bir hata yaparsın ama hatanın sebebi aslında senin yaptığın değil de, daha önceki bir işin kalıntısıdır.
Umarım bu yazı, CORS hatalarıyla boğuşanlara biraz olsun ışık tutmuştur. Unutmayın, her sorunun bir çözümü var, yeter ki doğru yerden başlayalım. Hadi bakalım, kolay gelsin herkese 🙂