Share This Post

Azure / Öne Çıkanlar / Rest API

CORS Problemlerinize Kolay Çözüm; Azure Functions Proxy

Tam da böyle bir API bulmuşken CORS yüzünden çağıramadığınız ve yine “Offf bunun için back-end yazacağız şimdi” diye dertlendiğiniz oldu mu? 🙂 Süper can sıkıcı bir durum. Bazen basit bir şekilde JavaScript’ten uzanabileceğiniz bir yere sırf bu yüzden uzanamamak ve araya bir back-end almak can sıkabiliyor. Hele bir de projede hiç back-end yoksa 🙂 ve sırf bu nedenle bir back-end parçası eklemek zorunda kalıyorsam neredeyse projeden vaz geçesim geliyor 🙂

Sahnede Azure Functions 🙂

“Tamam yine API yazacağız sonuçta” der gibiyseniz bana biraz daha zaman verin 🙂 Tek satır bile kod yazmayacaksınız, garantisi benim. Aslında sahneye alacağımız arkadaş Azure Functions’ın bir parçası olan Function Proxies. Function Proxy’ler adından da anlaşılacağı üzere kolay yoldan Serverless API Proxy alabilmemizi sağlayan şeyler. Proxy’leri kendi Function’larınızın HTTP Endpoint’leri için kullanabileceğiniz üzere herhangi bir yerde host edilmiş bir API için de kullanabiliyorsunuz. Zaten CORS çözümümüzün güzelliği de buradan geliyor. Function Proxy kullanarak webdeki herhangi bir API’ı alıp, önüne geçip, CORS desteği olan endpoint açacağız 🙂

Geçenlerde bizim giik.fm podcastinin altyapısını Anchor’a taşıdım. Önüne kendi sitemizi almaya devam edelim diyince de Anchor’ın adam gibi API açmadığını gördüm 🙂 İstediğim şey basit bir şekilde podcast listesini bir API’dan almaktı. Biraz karıştırınca kendi sitelerinde kullandıkları API’ı yakalamayı başardım.

https://anchor.fm/api/v3/profile/931244c

Yukarıdaki adrese HTTP GET gittiğinde tüm istediğim veriyi alabiliyorum. Fakat giik.fm için yapacağım siteyi Github Pages’da host etmek istiyorum ve doğal olarak bir back-end falan olmayacak. Bu noktada 5 dk oturup bir Azure Function yazıp dışarıya da HTTP Endpoint açıp al gülüm / ver gülüm yapılabilir fakat o kadar tembel bir anıma denk geldi ki…. üşendim. Şimdi git, repo ayarla, CI/CD ayarla, deployment yap, test et uzun iş.

Tüm bunların yerine hemen Consumption Plan’da bir Function App alıp ilerleyebiliriz. Aşağıdaki ekran görüntüsünde “Proxies” kısmına gelip “+”‘ diyoruz.

Bir sonraki adımda artık Proxy’mizin özelliklerini tanımlamamız gerekiyor.

Yukarıdaki aşağıya doğru tüm detaylara bakalım. İlk aşamada Name dediğimiz bu Proxy’ye kafanıza göre vereceğiniz isim. Sonrasında Route Template var. Bu da bizim Azure Functions’da alacağımız kendi endpointimizin yolu. İzin verilen HTTP metodlarında ben sadece GET’i seçtim çünkü zaten sadece ona ihtiyacımız var. Gereksiz operasyonları Anchor’a göndermenin anlamı yok. Son olarak “Backend URL” kısmında da Anchor’ın endpointi verip geçtim.

Şu noktada “Save” diyip ilerlediğiniz yukarıdaki gibi size Azure Functions endpointi verilecek. Bu adrese tarayıcı ile giderseniz, basit bir GET ile doğrudan Anchor’dan gelen veriyi görmüş olursunuz. Süper ilkel bir proxy sahibi olduk 🙂 Bu URL’e giden her request sync bir şekilde Anchor’a gidip geri dönen veri de bizim URL’den geri dönecek.

Proxy’mizi yarattık ama daha bizim endpoint de CORS desteklemiyor 🙂 Gidip bir de Azure Functons’da CORS desteğini açmamız gerek.

Bunun için hemen Function App’i seçip “Platform Features”‘dan “CORS” kısmına gidebiliriz.

Burada artık isterseniz tüm dünyaya izin verin, isterseniz kendi sitenize karar size kalmış.

Artık herşey hazır 🙂 CORS destekli Proxy’mizi kullanmaya başlayabiliriz. Hatta isterseniz bu endpointi biraz daha özelleştirip herkesin kullanabileceği bir hale getirmek de mümkün. Örneğin anchor’dan aldığımız URL’in içinde belli ki sondaki kısım profile identifier. Bizim proxy onu parametrik olarak da alabilir 🙂

https://anchor.fm/api/v3/profile/931244c

Proxy’mizi yukarıdaki gibi değiştirdim. Route Template içinde bir değişken tanımlayıp, aynı değişkeni Backend URL’e verdim. Böylece “https://giikfmproxy.azurewebsites.net/931244c/list” adresine gelen requestlerdeki 931244c kısmı dinamik olarak Backend URL’in sonuna eklenecek ve elimizde farklı profile Id’ler varsa aynı Proxy’i kullanabileceğiz.

Fiyatlandırma?

Gelelim esas konuya 😀 Kaç para? Consumption Plan’daysanız zaten kullandığınız kadar ödeyeceksiniz. App Service Plan seçtiyseniz Function App sizin App Service Plan içinde olduğunda göre sadece bandwidth için ek para ödersiniz.

Consumption Plan’da Function Proxy’lerin fiyatlandırması normal Function’lar ile aynı, yani GB/s üzerinden. İşin kötü tarafı kullanım bilgisini maalesef şu anda normal Function App portalinde göremiyoruz. Onun için Function App’e bir AppInsights bağlamak şart. Sonrasında AppInsights tarafında yukarıdaki gibi süper basit bir sorgu bile duration’ları getirmeye yetiyor. Tabi burada esas gol yediğimiz yer gittiğimiz üçüncü party endpointin cevap verme süresi. O süre doğal olarak bizim Function execution time’a eklenecek ve parasını vereceğiz 🙁 Başka çare de yok.

Umarım bu ufak ipucu işinize yarar 🙂 ve Azure Functions dünyasına girmenize vesile olur 😉 Görüşmek üzere.

Not: Ben tamamen üşenip bizim domaini anchor’a yönlendirdim bu arada 🙂 Yukarıdakilerin hiçbirini yapmadım 🙂 Aslında makaleyi yazarken yaptım da… neyse uzun hikaye 🙂 Görüşürüz.

Share This Post

XOGO CTO, Azure MVP, Microsoft RD

Leave a Reply