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

Blazor Ön Ucunu Kurma

Tim, derse SampleTestUI adında basit bir Blazor WebAssembly ön ucunu oluşturarak başlıyor. Bu ön uç, üretime hazır değildir—aksine, API ile bağlantıyı doğrulamak ve bilinçli olarak bir CORS sorunu tetiklemek için bir test projesidir.

• Tim, .NET 9 şablonunu kullanır ve kimlik doğrulama veya PWA özelliklerinden vazgeçer.

• Ön ucun amacı, gerçek dünya API çağrılarını simüle etmek ve farklı orijin istekleriyle ilgili test hatalarını ortaya çıkarmaktır.

• Ana sayfayı, /courses API uç noktasını arayacak ve kursların ve ilgili görsellerin listesini gösterecek ş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 uç modellerinin veri erişim modellerinden ayrı olması gerektiğini, bu sayede bağımlılığın azalacağını ve sürdürülebilirliğin artacağını vurgular (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>() kullanan bir async metodu yazar.

• Bu metod, ön uç ve arka uç arasındaki iletişimi doğrulamak için basit bir test olarak yerel API URL'si ile hardcode edilmiş (4:00).

Burada bir test metodu veya hata yönetimi yok, sadece doğrudan bir çağrı. Bu yapı, birim testleri yazmanın ilk adımlarını yansıtır; burada bileşenler arasındaki temel etkileşimi doğrulamayla başlarsınız.

Veri Alma Mantığını ve UI'yı Oluşturma

4:00'te API URL'sini hardcode ettikten sonra, Tim API'den kurs verilerini almak ve bunları Blazor ön ucunda göstermek için çekirdek mantığı oluşturmaya odaklanır. Bu, ön ucun arka uç ile etkileşimde bulunabileceğini doğrulamanın kritik bir adımıdır; otomatik testler yazmadan veya bir test çerçevesi kullanmadan önce bile.

İlk olarak, API'nin launchSettings.json dosyasından doğru URL'nin kullanıldığından emin olur — HTTP-S adresini alır ve tam uç noktayı oluşturmak için /courses ekler. Bu önemlidir çünkü tarayıcılar genellikle güvenli olmayan sayfalardan gelen HTTPS dışı 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");

Veriyi Gösterme

Veri alındıktan sonra, Tim Razor söz dizimini kullanarak kurslar listesini döngüye sokan basit bir UI 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üye sarılmış bir resim olarak gösterilir. Tim, görsellerin büyük olduğunu (1920x1080) belirtir, bu nedenle sayfanın aşırı yüklenmesini önlemek için genişliği 300px ile sınırlar.

Bu çıktı, API verisinin ön uca doğru bir şekilde aktığını görsel olarak doğrulayan bir işlev görür. Test metodundan bekleyeceğiniz türden bir geri bildirimi yansıtır; resimler görünürse, istek başarılı olmuştur.

Lansmana Hazırlık

Uygulamayı çalıştırmadan önce, Tim Visual Studio'da birden fazla başlangıç projesi yapılandırır. API projesini ilk başlatılacak şekilde, ardından Blazor ön ucunu ayarlar. Bu sıra, ön ucun veri almaya çalıştığı zaman API'nın hazır olmasını sağlamak için önemlidir.

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

CORS Duvarına Çarpmak

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

'[API URL]' adresine '[Frontend URL]' orijininden erişmek CORS politikası tarafından engellendi...' lettering(7:02)

Burası, CORS'u anlama ve yönetmenin hayati hale geldiği yerdir. Doğru başlıklar olmadan, tarayıcı bir orijinden diğerine olan istekleri engeller.

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

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

Bu, temiz kod uygulamaları ile uyumludur ve uygulamayı daha test edilebilir hale getirir. Bu tür modüler yapılandırmalar, mantığın izole edilip taklit veya geçersiz kılmanın daha kolay olduğu için daha sonra birim test metodları yazmayı da kolaylaştırır.

İzin Verici Bir CORS Politikası Uygulama

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

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

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

Bu yapı, harici hizmetlerin veya ön uç uygulamalarının API'ye tam erişime ihtiyaç duyduğu test odaklı gelişim ve entegrasyon testlerinde kullanışlıdır. Tim, bu politikayı 'AllowAll' olarak adlandırır ve yazım hataları veya tutarsızlıkları önlemek için ismi bir sabit olarak saklar (11:00):

private const string AllowAllPolicy = "AllowAll";

private const string AllowAllPolicy = "AllowAll";

Bu tür politikaların üretim ortamında kullanılmaması gerektiğini, ancak yerel ya da Docker konteynerlerinde geliştiricilerin deney yaparken veya gerçek uç noktalara karşı birim testleri yazarken ideal olduğunu belirtiyor.

Yapılandırmayı Program.cs'e Entegre Etme

Tim, CORS hizmetlerini kaydeder ve yapılandırmayı Program.cs'e 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 ya da test davranışlarını enjekte etmeyi kolaylaştırır. Bu yaklaşım, C# dilinde birim testi yapılandırırken merkezi yapılandırmaya sahip olmanın test kurulumunu nasıl basitleştirdiğini yansıtır.

Ön Ucu Yeniden Test Etme

CORS düzeltmesini uyguladıktan sonra, Tim her iki uygulamayı tekrar çalıştırır. Bu kez, Blazor ön ucu beklendiği gibi çalışır—ders verileri başarıyla yüklenir ve her ders görseli ilgili URL'ye bağlanır.

Önemli bir şekilde, ön uca hiçbir değişiklik yapılmadı. Tüm düzeltme API seviyesinde gerçekleşti, doğru CORS yapılandırması ile.

Test ve Setup Stratejisi Dersleri

Tim bu videoda doğrudan birim testi çerçevelerine girmese de, yaklaşımı bunun temelini atıyor. İşte nasıl:

• Sorunları net bir şekilde ayırarak, gelecekte test sınıfları ve mock nesneleri kullanmayı mümkün kılar.

• Özel CORS ayar dosyası, testler sırasında bir mock yapılandırmayla yeniden kullanılabilir veya değiştirilebilir.

• Hızlı ön uç projesi, tam birim test projeleri yazmadan önce bir başlangıç doğrulaması olarak manuel bir entegrasyon testi gibi hareket eder.

Bu, Visual Studio'da testlere nasıl yaklaşacağınızı yansıtır:

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

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

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

• Beklenen davranışı doğrulamak için basit birim testleri yazın, ardından köşe koşullarını kapsayan test senaryolarını genişletin.

CORS Senaryoları için Birim Testi Düşünceleri

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

• Yapılandırma hizmetlerinizi doğrulayan birim test metotları oluşturabilirsiniz.

• Farklı kökenlerden veya HTTP metotlarından gibi dış faktörleri simüle etmek için taklit çerçeveleri kullanın.

• Test metotlarınızın tutarlı bir şekilde geçtiğinden emin olmak için CI/CD sürecinizin bir parçası olarak test uygulamalarını çalıştırın.

• Hataları izlemek ve istikrar sağlamak için testlerinizi Visual Studio Test Explorer'a dahil edin.

Sonuç

Bu videolu derste Tim Corey, bir C# Web API içinde CORS yönetiminin pratik bir örneğini sunar ve bağlantıyı test etmek için basit bir Blazor ön ucu oluşturur. Yaklaşımı yalnızca bir tarayıcı hatasını düzeltmekle kalmaz; aynı zamanda sürdürülebilir kod, temiz bir mimari ve otomatik testlere kolayca genişletilebilir bir yapı kurar.

Buradan itibaren, geliştiriciler ünite testleri yazmaya, entegrasyon testlerini kurmaya ve kod kalitesini ve güvenilirliğini artırmak için Visual Studio, Test Explorer ve sahte çerçeveler gibi araçları kullanmaya güvenle ilerleyebilir.

Test yazmayı öğreniyor, ilk birim testinizi yazıyor ya da test yöntemlerinin beklendiği gibi başarısız olduğundan emin olmaya çalışıyorsanız, bu ders güçlü bir geliştirme süreci için sağlam bir temel oluşturur. En önemlisi, her şey mimariyi ve yapılandırmayı doğru şekilde kurarak başlar.