CORS Yönetimi ve Test; C# Kursunda Örnek API Oluşturma

Blazor Frontend'i Ayarlama

Tim, SampleTestUI adında basit bir Blazor WebAssembly frontend projesi oluşturarak derse başlar. Bu frontend, üretime hazır değil—daha çok, API ile bağlantıyı doğrulamak ve kasıtlı olarak bir CORS sorununu tetiklemek için bir test projesidir.

Tim, .NET 9 şablonunu kullanır ve kimlik doğrulama veya PWA özelliklerini devre dışı bırakır.

Ön yüzün amacı, gerçek dünya API çağrılarını simüle etmek ve çapraz kaynak istekleriyle ilgili test hatalarını ortaya çıkarmaktır.

• Ana sayfayı /courses API uç noktasını çağıracak ve ilişkili resimlerle birlikte bir ders listesini görüntüleyecek şekilde değiştirir.

Ön uç, API ile modeli paylaşmak yerine, ayrı olarak oluşturulmuş basit bir model sınıfı (CourseModel) kullanır. Tim, ön yüz modellerinin veri erişim modellerinden ayrı olması gerektiğini vurguluyor, böylece bağlılık azalır ve sürdürülebilirlik artar (2:28). Bu, sürdürülebilir testler ve test edilebilir kod yazarken önemli bir ilkedir.

API Çağrısını Yazma

API'den veri almak için:

Tim, bir HttpClient enjekte eder.

• Http.GetFromJsonAsync<List<CourseModel>>() kullanarak bir asenkron metod yazar.

Yöntem, frontend ve backend arasında iletişimi doğrulamak için basit bir test olarak yerel API URL'si (4:00) ile sabit kodlanmıştır.

Burada bir test yöntemi veya hata işleme yok, sadece doğrudan bir çağrı. Bu kurulum, birim testleri yazmanın ilk adımlarını yansıtır, burada başlangıçta bileşenler arasındaki temel etkileşimi doğrulamakla başlarsınız.

Veri Alma Mantığını ve Kullanıcı Arayüzünü Oluşturma

4:00'te API URL'sini sabit kodladıktan sonra, Tim, API'den kurs verilerini almak ve bunları Blazor ön yüzünde görüntülemek için çekirdek mantığı oluşturmaya odaklanıyor. Bu, ön uç biriminin, otomatik testler yazılmadan ya da bir test framework'ü kullanılmadan önce arka uç ile etkileşime girebildiğini doğrulamada çok önemli bir adımdır.

Önce, API'nin launchSettings.json dosyasından doğru URL'nin kullanıldığından emin olur — HTTPS adresini alarak /courses ekler ve tam uç noktayı oluşturur. Bu önemlidir çünkü tarayıcılar genellikle güvenli sayfalardan yapılan HTTPS olmayan API çağrılarını reddeder.

courses = await Http.GetFromJsonAsync<List<CourseModel>>("https://localhost:port/courses");

courses = await Http.GetFromJsonAsync<List<CourseModel>>("https://localhost:port/courses");

Verilerin Görüntülenmesi

Veriler alındıktan sonra, Tim, kurslar listesini yinelemek için Razor söz dizimini kullanarak basit bir UI döngüsü yazar:

@foreach (var c in courses) { <a href="@c.CourseUrl"> <img width="300" src="@c.CourseImage" /> </a> }

@foreach (var c in courses) { <a href="@c.CourseUrl"> <img width="300" src="@c.CourseImage" /> </a> }

Her kurs, bir köprü ile sarmalanmış bir resim olarak gösterilir. Tim, görüntülerin büyük olduğunu (1920x1080) belirtir, bu yüzden sayfanın aşırı doldurulmaması için genişliği 300px ile sınırlar.

Bu çıktı, API verilerinin ön uca doğru şekilde aktığını görsel olarak doğrular. Bu, geçerli bir test yöntemiyle almak istediğiniz türde bir geri bildirimi taklit eder—eğer resimler görünüyorsa, istek başarılı olmuştur.

Fırlatma İçin Hazırlık

Uygulamayı çalıştırmadan önce, Tim Visual Studio'da birden fazla başlangıç projesini yapılandırır. Önce API projesini, ardından Blazor ön yüzünü başlatacak şekilde ayarlıyor. Bu sıralama, ön uç veri almaya çalıştığında API'nin hazır olmasını sağlamak için gereklidir.

Bu son adım, saat 6:30'da testi çalıştırmak ve CORS hatasıyla karşılaşmak için zemin hazırlar; bu, öğreticinin bir sonraki bölümünün başladığı yerdir.

CORS Engeline Çarpmak

Tim, her iki projeyi Visual Studio'nun çözüm gezgini kullanarak aynı anda başlatırken, frontend API'yi çağırmaya çalışıyor—ama başarısız oluyor. Tarayıcının konsolu tanıdık bir mesaj gösterir:

"'[Frontend URL]' kaynağından '[API URL]' adresine erişim, CORS politikası tarafından engellendi…"(7:02)

Bu noktada CORS'u anlamak ve yönetmek önemli hale gelir. Uygun başlıklar yerinde olmazsa, tarayıcı bir orijinden diğerine yapılan istekleri engeller.

Bir CORS Yapılandırma Sınıfı Oluşturma

Program.cs'i karıştırmak yerine, Tim bir Startup klasöründe CorsConfig adında özel bir sınıf oluşturur. O, Swagger ve OpenAPI kurulumunda kullanılan aynı yapılandırma modelini uygulamak için statik bir sınıf yapısı kullanır.

Bu, temiz kod uygulamaları ile uyumlu olup uygulamayı daha test edilebilir hale getirir. Bu gibi modüler yapılandırmalar, daha sonra birim test yöntemleri yazmayı da kolaylaştırır çünkü mantık izole edilir ve taklit edilmesi veya geçersiz kılınması daha kolaydır.

Esnek bir CORS Politikası Uygulama

Tim, tam çapraz kaynak erişimine izin vermek için çok açık bir CORS politikası tanımlar:

policy.AllowAnyOrigin().AllowAnyMethod().AllowAnyHeader();

policy.AllowAnyOrigin().AllowAnyMethod().AllowAnyHeader();

Bu kurulum, harici servisler veya ön uç uygulamaların API'ye tam erişim sağlaması gerektiği durumlarda, test odaklı geliştirme ve entegrasyon testi için faydalıdır. Tim, bu politikayı "AllowAll" olarak adlandırır ve yazım hatalarını ve tutarsızlıkları önlemek için adı bir sabit içinde saklar (11:00):

private const string AllowAllPolicy = "AllowAll";

private const string AllowAllPolicy = "AllowAll";

Bu yöntemin üretimde kullanılmaması gerektiğini, ancak geliştiricilerin gerçek uç noktalarla ilgili deney yaparken veya birim testleri yazarken API'leri yerel olarak veya Docker konteynerleri içinde test etmek için ideal olduğunu belirtiyor.

Program.cs Dosyasına Yapılandırmayı Entegre Etme

Tim, CORS servislerini kaydeder ve Program.cs içinde yapılandırmayı uygular:

builder.Services.AddCorsServices(); app.ApplyCorsConfig();

builder.Services.AddCorsServices(); app.ApplyCorsConfig();

Bu modüler yapı, kod kalitesini artırır ve gelecekte sahte çerçeveleri eklemeyi veya test davranışlarını enjekte etmeyi kolaylaştırır. Bu, C#'de birim testlerini yapılandırma biçiminizi yansıtır, merkezi yapılandırmalara sahip olmak test kurulumunu basitleştirebilir.

Frontend'i Yeniden Test Etme

CORS düzeltmesini uyguladıktan sonra, Tim her iki uygulamayı yeniden çalıştırır. Bu sefer, Blazor frontend beklendiği gibi çalışıyor—kurs verileri başarıyla yükleniyor ve her kurs resmi ilgili URL'ye bağlantı sağlıyor.

Önemli olarak, frontend (ön yüz) üzerinde herhangi bir değişiklik yapılmadı. Tüm düzeltme, doğru CORS yapılandırması yoluyla API düzeyinde gerçekleşti.

Test ve Kurulum Stratejisinde Dersler

Tim bu videoda doğrudan birim testi çerçevelerine dalmasa da, yaklaşımı bunun temellerini atar. İşte nasıl:

Endişeleri temiz bir şekilde ayırır, gelecekte test sınıflarını ve sahte nesneleri kullanmayı mümkün kılar.

Özel CORS kurulum dosyası, testler sırasında yeniden kullanılabilir veya sahte bir yapılandırma ile değiştirilebilir.

Hızlı frontend projesi, tam bir birim testi projeleri yazmadan önce bir manuel entegrasyon testi gibi davranır—erken bir doğrulama.

Bu, Visual Studio'da test yapmaya yaklaşımınızı yansıtır:

• Ana uygulamanızın yanında bir birim testi projesi oluşturun.

• Tüm test metodlarını çalıştırmak ve sonuçları izlemek için Test Explorer'ı kullanın.

Harici bağımlılıkları - HTTP istekleri, veritabanı çağrıları veya yapılandırma dosyaları gibi - taklit edin.

• Beklenen davranışı doğrulamak için basit birim testleri yazın, ardından kenar durumlarıyla ilgili test senaryolarını kapsayacak şekilde genişletin.

CORS Senaryoları İçin Birim Testi Dikkat Edilmesi Gerekenler

Tim'in videosu esasen CORS yapılandırması hakkında olsa da, yazılım testi üzerindeki etkileri açıktır:

Yapılandırma servislerinizi doğrulayan birim test yöntemleri oluşturabilirsiniz.

• Mocking framework'ları kullanarak, farklı kaynaklar veya HTTP yöntemleri gibi harici faktörleri simüle edin.

Sürekli Entegrasyon/Sürekli Dağıtım (CI/CD) sürecinizin bir parçası olarak test yürütmelerini çalıştırın ve test yöntemlerinizin tutarlı bir şekilde geçtiğini doğrulayın.

Hataları takip etmek ve kararlılığı sağlamak için testleri Visual Studio Test Explorer'a dahil edin.

Sonuç

Bu videolu eğitimde, Tim Corey, bağlantıyı test etmek için basit bir Blazor frontend oluşturarak bir C# Web API'sinde CORS yönetimini uygulamalı bir örnekle gösteriyor. Onun yaklaşımı sadece bir tarayıcı hatasını düzeltmekle ilgili değildir; sürdürülebilir kodu, temiz mimariyi teşvik eden ve otomatik testlere kolayca genişletilebilen bir yapı kurar.

Buradan itibaren, geliştiriciler birim testleri yazmaya, entegrasyon testlerini kurmaya ve Visual Studio, Test Explorer ve mocking framework'ler gibi araçları kullanarak kod kalitesini ve güvenilirliğini artırmaya kesin bir şekilde ilerleyebilirler.

Test etmeye nasıl başlayacağınızı, ilk birim testinizi nasıl yazacağınızı veya test yöntemlerinin beklenildiğinde başarısız olup olmadığını nasıl kontrol edeceğinizi öğreniyor olun, bu ders güçlü bir geliştirme süreci için temeli sağlar. Ve en önemlisi—her şey doğru mimariyi ve yapılandırmayı elde etmekle başlar.