0Pricing
jQuery Academy · Ders

Etki Alanları Arası AJAX (CORS/JSONP)

Güvenli veri alışverişi için JSONP kullanarak etki alanları arası AJAX istekleri gönderme veya sunucuda CORS üst bilgilerini yapılandırma tekniklerini anlayıp uygulayın.

Etki Alanları Arası AJAX (CORS/JSONP), CoddyKit'te ücretsiz bir jQuery Academy dersidir. Bu, 3 dersinin 3. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, jQuery Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. jQuery Academy kursu toplamda 3 dersten oluşur.

Alanlar Arası AJAX: Zorluk

Web siteniz başka bir web sitesinden veri almaya çalıştığında buna alanlar arası AJAX isteği denir. Bu genellikle zahmetlidir!

Web tarayıcılarında varsayılan olarak, bir web sayfasının kaynaklandığı alandan farklı bir alana istek göndermesini engelleyen bir güvenlik kuralı vardır. Bu kural verilerinizi korur.

Aynı Kaynak Politikasını Anlama

Az önce sözünü ettiğimiz güvenlik kuralının adı Aynı Kaynak Politikası (SOP)dır. Bu, temel bir tarayıcı güvenlik özelliğidir.

SOP, bir web tarayıcısının ilk web sayfasında bulunan betiklerin ikinci bir web sayfasındaki verilere yalnızca her iki web sayfası da aynı kaynağa (alan adı, iletişim kuralı ve bağlantı noktası) sahipse erişmesine izin verir.

  • Örnek: mywebsite.com adresindeki bir sayfa doğrudan api.anotherdomain.com adresinden veri alamaz.

CORS: Modern Bir Çözüm

Alanlar arası isteklere güvenli bir şekilde izin vermek için web topluluğu Çapraz Kaynak Paylaşımı (CORS) yaklaşımını geliştirdi. Bu, bunu yönetmenin modern ve standart yoludur.

CORS, sunucunun belirli diğer alanların kaynaklarına erişmesinin uygun olduğunu tarayıcıya açıkça bildirmesine olanak tanır.

CORS: Sunucu Tarafı Yapılandırması

CORS, öncelikle verileri sağlayan sunucuda yapılandırılır. Sunucu, hangi kaynaklara izin verildiğini belirtmek için yanıtında özel HTTP üst bilgileri gönderir.

Temel üst bilgi Access-Control-Allow-Origin değeridir. Kaynağa hangi alanların erişebileceğini belirtir.

  • Access-Control-Allow-Origin: * (herhangi bir alana izin verir)
  • Access-Control-Allow-Origin: https://yourdomain.com (yalnızca belirli bir alana izin verir)

CORS: jQuery İstemci İstekleri

İstemci tarafında (jQuery kullanarak) CORS isteği yapmak, sunucu doğru yapılandırıldığı sürece çoğu zaman normal bir AJAX isteğinden farklı değildir.

jQuery, tarayıcı düzeyindeki iletişimi yönetir. $.ajax() çağrınızı alanlar arası URL'ye yönlendirmeniz yeterlidir.

$.ajax({
  url: "https://api.example.com/data", // Server must allow CORS
  method: "GET",
  success: function(data) {
    console.log("CORS success:", data);
  },
  error: function(jqXHR, textStatus, errorThrown) {
    console.error("CORS Error:", textStatus, errorThrown);
  }
});

CORS: Ön İstekler (OPTIONS)

Belirli "karmaşık" CORS istekleri için tarayıcılar, gerçek isteği göndermeden önce bir ön istek gerçekleştirir. Bu, ek bir güvenlik adımıdır.

Ön istek, sunucudan izin istemek için OPTIONS HTTP yöntemini kullanır. Sunucu izin verirse tarayıcı gerçek isteği gönderir (ör. PUT, DELETE veya özel üst bilgiler içeren istekler).

JSONP: Daha Eski Bir Alternatif

CORS yaygın olarak benimsenmeden önce JSONP (Dolgulu JSON), özellikle eski tarayıcılar veya API'ler için alanlar arası isteklere yönelik yaygın bir geçici çözümdü.

JSONP, tarayıcının herhangi bir alandan <script> etiketlerini yüklemesine izin vermesinden yaratıcı bir şekilde yararlanarak Aynı Kaynak Politikasını aşar.

JSONP: Mekanizma

JSONP şu şekilde çalışır:

  • Dinamik olarak bir <script> etiketi oluşturur ve src değerini alanlar arası URL olarak ayarlarsınız.
  • JSONP isteği bekleyen sunucu, JSON verilerini bir işlev çağrısının içine sarar (bu, 'dolgu'dur).
  • Tarayıcı bu betiği çalıştırır ve sayfanızda genel olarak tanımlanmış bir işlevi, verileri bağımsız değişken olarak kullanarak çağırır.

JSONP: jQuery Uygulaması

jQuery, JSONP uygulamasını büyük ölçüde kolaylaştırır. $.ajax() çağrınızda dataType: "jsonp" belirtmeniz yeterlidir.

jQuery, dinamik <script> etiketini oluşturmayı, benzersiz bir geri çağırma işlevi adı üretmeyi ve yanıt geldiğinde bu işlevi çalıştırmayı otomatik olarak yönetir.

$.ajax({
  url: "https://api.example.com/jsonp-data?callback=?", // Server must support JSONP
  dataType: "jsonp",
  success: function(data) {
    console.log("JSONP success:", data);
  },
  error: function(jqXHR, textStatus, errorThrown) {
    console.error("JSONP Error:", textStatus, errorThrown);
  }
});

CORS ve JSONP: Temel Farklar

Her ikisi de alanlar arası sorunları ele alsa da CORS ve JSONP'nin özellikleri birbirinden farklıdır:

  • CORS: Modern standarttır, HTTP üst bilgilerini kullanır, güvenlidir, tüm HTTP yöntemlerini destekler ve sunucu tarafında yapılandırma gerektirir.
  • JSONP: Daha eski bir geçici çözümdür, <script> etiketlerini kullanır, daha az güvenlidir, yalnızca GET isteklerini destekler, istemci tarafında çalışır ve sunucunun yanıtı sarmalamasını gerektirir.

Hızlı Kontrol: Alanlar Arası İstekler

Aşağıdaki ifadelerden hangileri alanlar arası AJAX istekleri hakkında TRUEdur?

Tekrar: Alanlar Arası Ustalık

Alanlar arası AJAX isteklerinde Aynı Kaynak Politikasını nasıl aşacağınızı öğrendiniz!

  • CORS, izin için sunucu tarafındaki HTTP üst bilgilerine dayanan modern ve güvenli standarttır.
  • JSONP, dinamik <script> etiketlerini kullanan, GET istekleri için daha eski ve daha az güvenli bir geçici çözümdür.

Mümkün olduğunda her zaman CORS'u tercih edin; çünkü CORS daha güvenli ve esnektir. JSONP çoğunlukla eski sistemler veya belirli senaryolar içindir.

Sıkça Sorulan Sorular

“Etki Alanları Arası AJAX (CORS/JSONP)” dersi ücretsiz mi?

Evet — “Etki Alanları Arası AJAX (CORS/JSONP)” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve jQuery Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. jQuery Academy kursu toplamda 3 dersten oluşur.

“Etki Alanları Arası AJAX (CORS/JSONP)” dersinde ne öğreneceğim?

Güvenli veri alışverişi için JSONP kullanarak etki alanları arası AJAX istekleri gönderme veya sunucuda CORS üst bilgilerini yapılandırma tekniklerini anlayıp uygulayın. jQuery Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.

jQuery Academy öğrenmeye başlamak için deneyim gerekli mi?

Önceden deneyim gerekmez. CoddyKit'te jQuery Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 3 dersinin 3. dersidir.

“Etki Alanları Arası AJAX (CORS/JSONP)” dersi ne kadar sürer?

Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.

Bu jQuery Academy dersinde kod yazıp çalıştırabilir miyim?

Evet. Her jQuery Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.

Bu kursun tüm dersleri

  1. AJAX İsteklerini Etkili Şekilde Yapılandırma
  2. AJAX Hatalarını ve Başarı Durumlarını Ele Alma
  3. Etki Alanları Arası AJAX (CORS/JSONP)
← jQuery Academy Sayfasına Dön