CORS hatası: No Access-Control-Allow-Origin header nasıl çözülür?

1. Origin değerini tam olarak belirleyin

Origin; protokol, host ve port birleşimidir. http://localhost:5173, http://localhost:3000 ve https://localhost:5173 farklı origin değerleridir. URL yolu origin'in parçası değildir; izin listesine /dashboard eklemeyin.

Geliştirici araçlarında Network sekmesini açın. Başarısız isteğin gerçek URL'sini, Origin başlığını ve varsa ondan önce yapılan OPTIONS isteğini inceleyin. Yönlendirme, 401, 404 veya 500 yanıtı da CORS başlığı taşımadığında konsolda CORS hatası olarak görünebilir. Önce gerçek HTTP sonucunu anlamak gerekir.

2. Express için kontrollü izin tanımlayın

Aşağıdaki örnek, express ve cors paketleri kurulu bir CommonJS uygulaması içindir. Üretimdeki arayüz adresinizi izin listesine yazın; middleware'i route'lardan önce ekleyin:

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

app.use(cors({
  origin: ["http://localhost:5173", "https://app.example.com"],
  methods: ["GET", "POST", "PUT", "DELETE", "OPTIONS"],
  allowedHeaders: ["Content-Type", "Authorization"]
}));
app.use(express.json());
app.get("/api/health", (req, res) => res.json({ ok: true }));
app.listen(3000);

Uygulama seviyesinde kullanılan bu middleware preflight isteklerini de karşılar. Başka bir middleware OPTIONS isteğini daha önce engelliyorsa sıralamayı düzeltin. API'nizin ihtiyacı olmayan yöntem veya origin değerlerini listeye eklemeyin.

3. ASP.NET Core için named policy kullanın

Minimal hosting kullanan bir ASP.NET Core uygulamasında servis kaydı ve middleware birlikte gerekir. Mevcut Program.cs akışına uygun yerlere ekleyin:

var builder = WebApplication.CreateBuilder(args);
builder.Services.AddControllers();
builder.Services.AddCors(options =>
{
    options.AddPolicy("Frontend", policy =>
        policy.WithOrigins("http://localhost:5173", "https://app.example.com")
              .WithMethods("GET", "POST", "PUT", "DELETE")
              .WithHeaders("Content-Type", "Authorization"));
});

var app = builder.Build();
app.UseRouting();
app.UseCors("Frontend");
app.UseAuthorization();
app.MapControllers();
app.Run();

Kimlik doğrulama kullanan uygulamada kendi authentication yapılandırmanızı koruyun. CORS middleware'ini routing sonrasında ve authorization öncesinde konumlandırın. Origin değerlerinin sonuna gereksiz eğik çizgi eklemeyin.

4. Çerezli isteklerde wildcard kullanmayın

Oturum çerezi gönderen cross-origin fetch için istemcide credentials: "include" gerekir. Sunucuda da izin verilen somut origin ve Access-Control-Allow-Credentials: true bulunmalıdır. Express örneğine credentials: true, ASP.NET Core politikasına AllowCredentials() eklenebilir.

Çerezli istekte Access-Control-Allow-Origin: * kullanılamaz. Ayrıca CORS ayarı çerezin SameSite, Secure veya tarayıcı üçüncü taraf çerez politikasını geçersiz kılmaz. CORS'un düzelmesi, her cross-site oturum senaryosunun otomatik çalışacağı anlamına gelmez.

5. Preflight yanıtını doğrulayın

Terminalde aşağıdaki isteği API'nizin gerçek endpoint'i için çalıştırın. Windows PowerShell'de curl takma adı yerine curl.exe kullanın:

curl -i -X OPTIONS https://api.example.com/api/items \
  -H "Origin: https://app.example.com" \
  -H "Access-Control-Request-Method: POST" \
  -H "Access-Control-Request-Headers: content-type,authorization"

Yanıtta izin verilen origin, yöntem ve başlıklar görünmelidir. Sonra gerçek POST yanıtını da kontrol edin. curl CORS'u uygulamaz; yalnızca başlıkları incelemenize yardım eder. Son doğrulama tarayıcıda yapılmalıdır.

Hata sürüyorsa proxy ve gerçek yanıtı inceleyin

Proxy ile uygulama aynı başlığı iki kere ekliyorsa tarayıcı yanıtı reddedebilir. OPTIONS isteği giriş sayfasına yönlendiriliyorsa veya proxy tarafından 403 dönüyorsa API politikası hiç devreye girmeyebilir. Dinamik origin seçen sunucu yanıtlarında önbelleğin origin'e göre ayrılması için Vary: Origin davranışını da kontrol edin.

Kaynaklar

• MDN: CORS ve preflight davranışı
• Express: cors middleware
• Microsoft: ASP.NET Core CORS yapılandırması