none
"Has been blocked by CORS policy" hatası almak RRS feed

  • Soru

  • Merhaba, 

    Bir hata konusunda görüşlerinizi bekliyorum. Önce biraz sistemin akışından / yapısından bahsedeyim. 

    YAPI 1 : Visual Studio üzerinde oluşturduğum NodeJS Console Application uygulamam var. NodeJS üzerinde express servisini kullanıyorum. Bu ConsoleApp bir service görevi görmekte. Harici bir JSON dosyasını (localde olan bir JSON) okuyup HTTP üzerinden verileri servis ediyor. NodeJS servisinin çalışmasında herhangi bir sorun gözükmüyor.

    YAPI 2 : Bir HTML5 sayfam bulunuyor. Harici masaüstünde duran index.html sayfa gibi düşünebilirsiniz. NodeJSConsoleApp ile bir root ilişkisi yok. Bu HTML5 sayfa üzerinden AJAX ile NodeJS servisine request talebinde bulunuyorum, NodeJS servisimde bana bir JSON verilerini içeren bir response dönüyor. 

    Hata aldığım kısım ise burada başlıyor. AJAX'ın içerisinde done methodumun içerisine hiçbir şekilde giremiyorum. 

    Aşağıdaki JavaScript kodu HTML5 sayfasında bulunan script

    $(document).ready(function($) {
    
    			var dataUrl = "http://localhost/yeniistek";
    
    			var settingsListDataSet1 = {
    				"async": false,
    				"crossDomain": false,
    				"url": dataUrl,
    				"method": "GET"
    			};
    
    			$.ajax(settingsListDataSet1).done(function(response) {
    				alert("done");				
    			}).fail(function(response) {
    				alert("fail");
    			}).always(function(response) {
    				alert("always");
    			});
    		});

    Yapıyı özetlemek gerekirse NodeJS servisine Browser(Google Chrome, Edge) üzerinden bir talepte bulunuyorum. Servisimde bana localde bir JSON dosyasını okuyup verileri dönüyor. Ancak AJAX ile Get ettiğinde done methodumun içerisine giremiyorum. 

    Hatayı console'a yazdırdığımda şöyle bir uyarı alıyorum 

    Access to XMLHttpRequest at 'http://localhost/yeniistek' from origin 'null' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.


    Bu hatayı Edge, Google Chrome, Safari ve Firefox'da aynı şekilde alıyorum. 


    @EnesGeziciTR





    • Düzenleyen EnesGezici 6 Mayıs 2019 Pazartesi 13:43 text update
    6 Mayıs 2019 Pazartesi 09:31

Yanıtlar

  • Herkese Merhaba,

    Bu hatanın çözümünü buldum. Daha sonra problem yaşayacak arkadaşlara klavuz olması amacıyla paylaşıyorum.

    Öncelikle hatanın sebebi Same Origin politikasından kaynaklanıyor. Browser Nodejs service ile iletişime geçemiyor bu sebeple serviceden null değer dönüyor. 

    Same Origin Politikasında, her AJAX isteğinin uygulamanızın ana bilgisayarı, protokolü ve bağlantı noktasıyla eşleşmesi gerektiğini söylüyor. 

    Çözüm için farklı yöntemler buldum. 

    Eğer Express kullanıyorsanız Express'te CORS kütüphanesini etkinleştirmeniz gerekiyor. Birden fazla çözüm yolu var fakat en basit çözüm yolu bence bu. 

    1. Yöntem Express'te CORS Kütüphanesini Etkinleştirin

    Express'te CORS kütüphanesi nasıl etkinleştirilir? Aşağıdaki adımları uygulayın.

    Step 1 :   Express projenizden veya komut satırı ekranından aşağıdaki şekilde cors kütüphanesini yükleyin

    npm install cors 

    Step 2 : Require'da bir ara katman olarak cors'u ekleyin 

    var express = require('express');
    // Cors kütüphanesini import edin
    var cors = require('cors');
    
    var app = express();
    
    // Rotalarınızı ayarlamadan önce kullanın
    app.use(cors());

    Burada dikkat etmeniz gereken bir nokta var. Express, katman yazılımını sırayla çalıştırır. Bu yüzden app.use rotalarınızı ayarlamadan önce bu kodun çalışabilirliğinden emin olun. 

    İkinci nokta ise güvenlik açığı. Varsayılan olarak cors kütüphanesi herhangi bir kaynaktan gelen isteklere izin verecektir. Bu uygulamanızda güvenlik sorunlarına ve kötüye kullanıma açabilir. 

    Bunun yerine her kullanıma izin vermeyerek, izin verilen alan adları için liste oluşturun. Her isteği bir listeye göre kontrol edin. 

    Liste oluşturma işini nasıl yapacaksınız? 

    Örrnek kod paylaşıyorum.

    // Liste oluşturun ve listeyi kontrol edin
    
    var guvenliListe= ['http://enesgezici.com', 'http://enesgezici2.com']
    var corsOptions = {
      origin: function (origin, callback) {
        if (guvenliListe.indexOf(origin) !== -1) {
          callback(null, true)
        } else {
          callback(new Error('CORS tarafından izin verilmiyor
    '))
        }
      }
    }
    
    // Corsa gönder
    app.use(cors(corsOptions));

    1. yöntem bu kadar. Fazlasıyla işinizi görecektir.

    ------------------------------------------------------------

    2. Yöntemse Proxy Sunucusu

    Sunucuyu değiştiremezseniz kendi proxy'nizi çalıştırabilirsiniz. Ve bu proxyi Access-Control-Allow-Origin sayfanızla aynı kökenden değilse sunucuya yönlendirme yapar. Bazı uzak sunuculara API istekleri göndermek yerine proxy'nize istek gönderir ve bu da onları uzak sunucuya iletir. 

    Bu konu hakkında destek isterseniz iletişime geçebilirsiniz arkadaşlar. Teşekkürler. 



    @EnesGeziciTR


    • Yanıt Olarak İşaretleyen EnesGezici 8 Mayıs 2019 Çarşamba 06:26
    • Düzenleyen EnesGezici 8 Mayıs 2019 Çarşamba 06:29 update
    8 Mayıs 2019 Çarşamba 06:26

Tüm Yanıtlar

  • Cevap hatanın içinde bulunuyor zaten. Eğer tarayıcının developer aracından giden-gelen tarafiği incelerseniz bir OPTIONS paketi gittiğini göreceksiniz. Tarayıcı ona yanıt alamıyordur. Yine de tüm paketleri inceleyin. Bir tanesinde ilgili header yok veya yanlış yazılmış. Origin için de * vermek yerine gelen requeste göre bir değer verin. * kullanımı sıkıntı çıkartabiliyor.

    www.cihanyakar.com

    6 Mayıs 2019 Pazartesi 11:33
  • Cevap alamadığını biliyorum, hangi paketlerin gidip gitmediğini de takip edebiliyorum. Buradaki nokta şu birden fazla request yok. Tek bir istek var. Her kullanıcı oturumunda bir kez bir istek geliyor. Oturum süresini de en az 1 gün olarak düşünebilirsiniz. Söylediğiniz yöntemi denemiştim, bu çözüm üretmedi. Yine de teşekkürler yanıt için. 

    @EnesGeziciTR


    • Düzenleyen EnesGezici 6 Mayıs 2019 Pazartesi 13:49 text update
    6 Mayıs 2019 Pazartesi 13:48
  • Herkese Merhaba,

    Bu hatanın çözümünü buldum. Daha sonra problem yaşayacak arkadaşlara klavuz olması amacıyla paylaşıyorum.

    Öncelikle hatanın sebebi Same Origin politikasından kaynaklanıyor. Browser Nodejs service ile iletişime geçemiyor bu sebeple serviceden null değer dönüyor. 

    Same Origin Politikasında, her AJAX isteğinin uygulamanızın ana bilgisayarı, protokolü ve bağlantı noktasıyla eşleşmesi gerektiğini söylüyor. 

    Çözüm için farklı yöntemler buldum. 

    Eğer Express kullanıyorsanız Express'te CORS kütüphanesini etkinleştirmeniz gerekiyor. Birden fazla çözüm yolu var fakat en basit çözüm yolu bence bu. 

    1. Yöntem Express'te CORS Kütüphanesini Etkinleştirin

    Express'te CORS kütüphanesi nasıl etkinleştirilir? Aşağıdaki adımları uygulayın.

    Step 1 :   Express projenizden veya komut satırı ekranından aşağıdaki şekilde cors kütüphanesini yükleyin

    npm install cors 

    Step 2 : Require'da bir ara katman olarak cors'u ekleyin 

    var express = require('express');
    // Cors kütüphanesini import edin
    var cors = require('cors');
    
    var app = express();
    
    // Rotalarınızı ayarlamadan önce kullanın
    app.use(cors());

    Burada dikkat etmeniz gereken bir nokta var. Express, katman yazılımını sırayla çalıştırır. Bu yüzden app.use rotalarınızı ayarlamadan önce bu kodun çalışabilirliğinden emin olun. 

    İkinci nokta ise güvenlik açığı. Varsayılan olarak cors kütüphanesi herhangi bir kaynaktan gelen isteklere izin verecektir. Bu uygulamanızda güvenlik sorunlarına ve kötüye kullanıma açabilir. 

    Bunun yerine her kullanıma izin vermeyerek, izin verilen alan adları için liste oluşturun. Her isteği bir listeye göre kontrol edin. 

    Liste oluşturma işini nasıl yapacaksınız? 

    Örrnek kod paylaşıyorum.

    // Liste oluşturun ve listeyi kontrol edin
    
    var guvenliListe= ['http://enesgezici.com', 'http://enesgezici2.com']
    var corsOptions = {
      origin: function (origin, callback) {
        if (guvenliListe.indexOf(origin) !== -1) {
          callback(null, true)
        } else {
          callback(new Error('CORS tarafından izin verilmiyor
    '))
        }
      }
    }
    
    // Corsa gönder
    app.use(cors(corsOptions));

    1. yöntem bu kadar. Fazlasıyla işinizi görecektir.

    ------------------------------------------------------------

    2. Yöntemse Proxy Sunucusu

    Sunucuyu değiştiremezseniz kendi proxy'nizi çalıştırabilirsiniz. Ve bu proxyi Access-Control-Allow-Origin sayfanızla aynı kökenden değilse sunucuya yönlendirme yapar. Bazı uzak sunuculara API istekleri göndermek yerine proxy'nize istek gönderir ve bu da onları uzak sunucuya iletir. 

    Bu konu hakkında destek isterseniz iletişime geçebilirsiniz arkadaşlar. Teşekkürler. 



    @EnesGeziciTR


    • Yanıt Olarak İşaretleyen EnesGezici 8 Mayıs 2019 Çarşamba 06:26
    • Düzenleyen EnesGezici 8 Mayıs 2019 Çarşamba 06:29 update
    8 Mayıs 2019 Çarşamba 06:26
  • İşte o CORS kütüphanesi benim dediğimi yapıyor :) Ben kütüphaneler ile değil direkt protokol ilie yanıt veriyorum. Dediğimi yapsanız yine sonuç alacaktınız. Fark etmez önemli olan sonuca ulaşmanız. Çalışmalarınızda başarılar.

    www.cihanyakar.com


    8 Mayıs 2019 Çarşamba 07:49
  • Teşekkür ederim faydalı fikirleriniz için. Aslında bende söylediğinizden yola çıkarak çözüme ulaştım :) 

    @EnesGeziciTR

    8 Mayıs 2019 Çarşamba 18:25