Merhaba, daha önce http://angulartr.com/cors-problemine-cozum-yql/ adresinde de bahsettiğim üzere, backendless bir uygulama geliştirirken, kullandığınız api’ a istek gönderdiğinizde tarayıcınızın console’ unda No ‘Access-Control-Allow-Origin’ header is present on the requested resource” şeklinde bir hata alabilirsiniz. Her api için bu geçerli değil. Ama çoğunda bu geçerli.

Bu yazımda, kendi yazdığım modülü sizlere tanıtacağım.

Bu duruma nasıl çözüm bulabilirdik ?

  • Tabiki uygulamamızın yaptığı XHR Request ler için, api ile aramızda proxy görevi görecek bir backend yazarak.

Lakin bu masraflı çözümün yerine, developer dostu Yahoo’ nun geliştirdiği YQL’ i kullanabileceğimizi farketmiştik. Endpoint’ leri YQL ile parse ediyor ve request gönderiyorduk.

Peki noluyordu ?

  • İsteğimiz yahoo serverlarına gidiyor, yahoo serverda endpoint’ e gidip cevabı alıyor ve bize geri dönüyordu. Yani proxy işi yapıyordu.

Lakin ufak bir sorun vardı. Uygulamamızın XHR Requestleri artık bağımlıydı!

Normalde bir get request yazarken şu şekilde yazmamız gerekirken;

Artık urlleri yql formatına çevirip yazıyorduk;

Bu ne demek oluyordu ? Urlleriniz yql bağımlı. Herhangi bir zamanda, yql i kullanmaktan bir anda vazgeçseniz(nasıl vazgeçicem, başka çözüm yokki demeyin), tüm requestleri düzeltmeniz gerekiyor.

Eğerki uygulamanız topu topu 3-5 request yapıyorsa, pratik bu bağımlılık belki ??? kabul edilebilir. Ama iş mantığı olarak kabul edilemez !!!

İşte bu noktada doğru formül olarak karşımıza AngularJS Interceptor çıkıyor 🙂  https://docs.angularjs.org/api/ng/service/$http#interceptors adresinden de detaylarını öğrenebileceğiniz gibi, çok kısaca açıklamaya çalışıyım;

Interceptor kelimesi benimde ilk defa karşılaştığım bir kelime idi. Önleyici vb. anlamlara geldiğini öğrendim. AngularJS’ teki kullanımına bakarsakta bir nevi önleyici olarak görev yapıyor. Ama önleyici derken kollayıcı gibi anlamlar çıkmasın. Önleyici, öngörevci gibi düşenebiliriz.

XHR Requestleri yapmak için AngularJS’ in $http kütüphanesini kullanıyoruz, değilmi. Bu kütüphanenin get, post, delete vb. metodları var, bu metodlarda kendi içinde request ve response metodlarını kullanıyor. Yani $http kütüphanesi üzerinden get,post vb herhangi bir metodu çalıştırdığımızda, mutlaka ve mutlaka request ve ona bağlı olarakta response metodu tetikleniyor.

Bu noktada, eğerki ben request metodunu extend edersem ???

Bu konuda fikriniz yoksa http://phrogz.net/JS/Classes/OOPinJS2.html adresine gözatabilirsiniz.

Extend nedir? öyle bir şey yok tarzı sorularınız varsa, Javascript teki prototype işleminin AngularJS’ te extend olarak kullanıldığını https://docs.angularjs.org/api/ng/function/angular.extend adresinden inceleyebilirsiniz.

Eğerki ben request metodunu extend edip, request metoduna gelen link’ i yql linkine çevirip istek yaparsam, uygulamamda tüm linkler bir anda yql linkine çevrilmiş olacak 🙂

Yani tek tek bütün isteklerime gidip, linkleri düzeltmeyeceğim.

Peki bu işi nasıl yapacağız ?

Modül gelişticisi yani ben aşağıdaki şekilde yaptım. Kullanıcı developer olarak nasıl kullanacağınız ise konunun devamında var.
https://github.com/ozdemirr/angular-yql-http-interceptor adresine modülümü koydum. https://github.com/ozdemirr/angular-yql-http-interceptor/blob/master/lib/yql-http-interceptor.js adresinde, modülü incelerseniz yql adında bir modül ve yqlService adında bir factory açtığımı göreceksiniz. Bu factory AngularJS’ in $http kütüphanesi için kullanılacak bir interceptor olacağı için, request ve response metodlarını, yql işini göre düzenledim. Yanısıra, bu metodların kullandığı yardımcı metodlarda bulunuyor. Ardından bu modülümü projeme dahil edip, aşağıdaki koda benzer şekilde ayarlama yaptığımda ise, artık AngularJS’ in $http servisine kendi interceptor’ ümü dahil etmiş ve dolayısıyla, request ve response metodlarını extend etmiş oluyorum.

Bu noktadan sonra neler oluyor ?

Artık $http servisi üzerinden kullandığım get,post vb metodlarda $http kütüphanesinin kendi request metodunun yaptığı işlemlere, yqlservice imdeki işlemleri de dahil etmiş oluyorum.

Bu sayede, ben uygulamamdaki XHR Requestlerin linkini asdfghjkl.com olarak veriyorum, ama interceptor üm sayesinde, bu linkler yql e dönüşüyor.

İstersem bu interceptor ü projemde kullanmayı bırakırım ve herşey standart şekilde çalışmaya devam eder.

Çalışmaya devam eder derken, CORS probleminden dolayı istekleriniz başarı ile sonuçlanmaz lakin İŞ AKIŞI olması gerektiği gibi yürür 🙂

 

Developer olarak bunu nasıl kullanacağım” ?

  • Modülün anasayfasında https://github.com/ozdemirr/angular-yql-http-interceptor, yukarıda da bahsettiğim gibi projeye nasıl dahil edeceğiniz anlatıldı. example klasörü altında, basit bir örneklemesini yaptım. http://requestb.in de açılan sayfalar, kullanılmadıkça kendiliğinden kapanıyor. Bu yüzden deneme yaparken, kendinize özgü bir tane açmayı unutmayın.

Leave A Comment

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir