SSS · "CORS policy" hatası alıyorum, API'me tarayıcıdan erişemiyorum

Soru-Cevap · Q&A
, ,
1

Çok sık sorulan bir soru olduğu için SSS olarak eklendi.

Frontend’imi localhost:5173’te çalıştırıyorum, API’m localhost:3000’de. Tarayıcı konsolunda şu hatayı görüyorum:

Access to fetch at 'http://localhost:3000/api' from origin 'http://localhost:5173'
has been blocked by CORS policy

Postman’de çalışıyor ama tarayıcıda çalışmıyor. Neden?

2

Bu bir hata değil, bir güvenlik önlemi. Tarayıcılar, bir sayfanın başka bir kaynağa (farklı alan adı/port) istek atmasını varsayılan olarak kısıtlar. Buna “Same-Origin Policy” denir. Postman tarayıcı olmadığı için bu kuralı uygulamaz; o yüzden orada çalışıyor.

Çözüm: API sunucun, bu kaynağa izin verdiğini söyleyen bir başlık göndermeli. İzni sunucu tarafında verirsin, frontend’de değil.

Node.js / Express:

const cors = require("cors");
app.use(cors({ origin: "http://localhost:5173" }));

Python / Flask:

from flask_cors import CORS
CORS(app, origins=["http://localhost:5173"])

Python / FastAPI:

from fastapi.middleware.cors import CORSMiddleware
app.add_middleware(CORSMiddleware, allow_origins=["http://localhost:5173"])

Önemli güvenlik notu:

  • Geliştirmede kolaylık olsun diye origin: "*" (herkese izin) yaygındır ama üretimde kullanma. Sadece kendi frontend adresine izin ver.
  • CORS bir güvenlik duvarı değildir; sadece tarayıcıdaki kuraldır. API’ni ayrıca kimlik doğrulama ile koru.
3

Teşekkürler, Express’te cors paketini ekleyince düzeldi. “Postman’de çalışıyor ama tarayıcıda çalışmıyor” kısmı kafamı çok karıştırmıştı, mantığını şimdi anladım. :folded_hands: