Fetch API

Bu codelab, Google Developers Training ekibi tarafından geliştirilen Progresif Web Uygulamaları Geliştirme eğitim kursunun bir parçasıdır. Bu kurstan en iyi şekilde yararlanmak için codelab'leri sırayla tamamlamanız önerilir.

Kursla ilgili tüm ayrıntılar için Progresif web uygulamaları geliştirme genel bakış başlıklı makaleyi inceleyin.

Giriş

Bu laboratuvarda, kaynakları getirmek için basit bir arayüz olan ve XMLHttpRequest API'ye göre geliştirilmiş Fetch API'yi kullanma adımları açıklanmaktadır.

Neler öğreneceksiniz?

  • Kaynak istemek için Fetch API'yi kullanma
  • Fetch ile GET, HEAD ve POST istekleri gönderme
  • Özel üstbilgileri okuma ve ayarlama
  • CORS'nin kullanımı ve sınırlamaları

Bilmeniz gerekenler

  • Temel JavaScript ve HTML
  • ES2015 Promises kavramı ve temel söz dizimi hakkında bilgi sahibi olma

İhtiyacınız olanlar

  • Terminal/kabuk erişimi olan bir bilgisayar
  • İnternet bağlantısı
  • Fetch'i destekleyen bir tarayıcı
  • Metin düzenleyici
  • Node ve npm

Not: Fetch API şu anda tüm tarayıcılarda desteklenmese de polyfill mevcuttur.

GitHub'dan pwa-training-labs deposunu indirin veya klonlayın ve gerekirse Node.js'nin LTS sürümünü yükleyin.

Bilgisayarınızın komut satırını açın. fetch-api-lab/app/ dizinine gidin ve yerel bir geliştirme sunucusu başlatın:

cd fetch-api-lab/app
npm install
node server.js

Sunucuyu Ctrl-c ile istediğiniz zaman sonlandırabilirsiniz.

Tarayıcınızı açıp localhost:8081/ adresine gidin. İstek gönderme düğmelerinin bulunduğu bir sayfa görürsünüz (düğmeler henüz çalışmaz).

Not: Laboratuvarı etkilememeleri için tüm hizmet çalışanlarının kaydını iptal edin ve localhost için tüm hizmet çalışanı önbelleklerini temizleyin. Chrome Geliştirici Araçları'nda, Uygulama sekmesinin Depolamayı temizle bölümünden Site verilerini temizle'yi tıklayarak bunu yapabilirsiniz.

fetch-api-lab/app/ klasörünü tercih ettiğiniz metin düzenleyicide açın. Laboratuvarı app/ klasöründe oluşturacaksınız.

Bu klasörde şunlar bulunur:

  • echo-servers/, test sunucularını çalıştırmak için kullanılan dosyaları içerir
  • examples/, getirme ile deneme yaparken kullandığımız örnek kaynakları içerir.
  • js/main.js, uygulamanın ana JavaScript'idir ve tüm kodlarınızı burada yazarsınız.
  • index.html, örnek sitemizin/uygulamamızın ana HTML sayfasıdır.
  • package-lock.json ve package.json, geliştirme sunucumuz ve echo sunucusu bağımlılıkları için yapılandırma dosyalarıdır.
  • server.js bir düğüm geliştirme sunucusudur

Fetch API'nin arayüzü nispeten basittir. Bu bölümde, fetch kullanarak temel bir HTTP isteğinin nasıl yazılacağı açıklanmaktadır.

JSON dosyası getirme

js/main.js bölümünde, uygulamanın JSON Getir düğmesi fetchJSON işlevine eklenmiştir.

fetchJSON işlevini, examples/animals.json dosyasını isteyecek ve yanıtı kaydedecek şekilde güncelleyin: 

function fetchJSON() {
  fetch('examples/animals.json')
    .then(logResult)
    .catch(logError);
}

Komut dosyasını kaydedin ve sayfayı yenileyin. Fetch JSON'ı (JSON'ı getir) tıklayın. Konsol, getirme yanıtını günlüğe kaydetmelidir.

Açıklama

fetch yöntemi, almak istediğimiz kaynağın yolunu parametre olarak kabul eder. Bu örnekte examples/animals.json. fetch, Response nesnesi olarak çözümlenen bir söz döndürür. Promise çözümlenirse yanıt, logResult işlevine iletilir. Promise reddedilirse catch devreye girer ve hata, logError işlevine iletilir.

Yanıt nesneleri, bir isteğe verilen yanıtı temsil eder. Yanıt gövdesinin yanı sıra yararlı özellikler ve yöntemler içerirler.

Geçersiz yanıtları test etme

Konsoldaki kaydedilmiş yanıtı inceleyin. status, url ve ok özelliklerinin değerlerini not edin.

fetchJSON içindeki examples/animals.json kaynağını examples/non-existent.json ile değiştirin. Güncellenen fetchJSON işlevi artık şöyle görünmelidir:

function fetchJSON() {
  fetch('examples/non-existent.json')
    .then(logResult)
    .catch(logError);
}

Komut dosyasını kaydedin ve sayfayı yenileyin. Bu mevcut olmayan kaynağı getirmeyi denemek için JSON'u getir'i tekrar tıklayın.

Getirme işleminin başarıyla tamamlandığını ve catch engellemesini tetiklemediğini gözlemleyin. Şimdi yeni yanıtın status, URL ve ok özelliklerini bulun.

Değerler iki dosya için farklı olmalıdır (nedenini anlıyor musunuz?). Konsol hataları aldıysanız değerler hatanın bağlamıyla eşleşiyor mu?

Açıklama

Başarısız olan yanıt neden catch bloğunu etkinleştirmedi? Bu, getirme ve sözler için önemli bir nottur. Kötü yanıtlar (ör. 404) hâlâ çözülmektedir. Bir getirme sözü yalnızca istek tamamlanamadığında reddedilir. Bu nedenle, yanıtın geçerliliğini her zaman kontrol etmeniz gerekir. Yanıtları bir sonraki bölümde doğrulayacağız.

Daha fazla bilgi için

Yanıt geçerliliğini kontrol etme

Yanıtların geçerliliğini kontrol etmek için kodumuzu güncellememiz gerekiyor.

main.js bölümünde, yanıtları doğrulamak için bir işlev ekleyin:

function validateResponse(response) {
  if (!response.ok) {
    throw Error(response.statusText);
  }
  return response;
}

Ardından fetchJSON yerine aşağıdaki kodu kullanın:

function fetchJSON() {
  fetch('examples/non-existent.json')
    .then(validateResponse)
    .then(logResult)
    .catch(logError);
}

Komut dosyasını kaydedin ve sayfayı yenileyin. Fetch JSON'ı (JSON'ı getir) tıklayın. Konsolu kontrol edin. Artık examples/non-existent.json yanıtı catch bloğunu tetiklemelidir.

fetchJSON işlevindeki examples/non-existent.json yerine orijinal examples/animals.json değerini girin. Güncellenen işlev artık şu şekilde görünmelidir:

function fetchJSON() {
  fetch('examples/animals.json')
    .then(validateResponse)
    .then(logResult)
    .catch(logError);
}

Komut dosyasını kaydedin ve sayfayı yenileyin. Fetch JSON'ı (JSON'ı getir) tıklayın. Yanıtın daha önce olduğu gibi başarıyla kaydedildiğini görmeniz gerekir.

Açıklama

validateResponse kontrolü eklendiğinden beri kötü yanıtlar (ör. 404) hata veriyor ve catch devreye giriyor. Bu sayede başarısız yanıtları işleyebilir ve beklenmeyen yanıtların getirme zincirinde yayılmasını önleyebiliriz.

Yanıtı okuma

Getirme yanıtları ReadableStreams (streams spec) olarak gösterilir ve yanıtın gövdesine erişmek için okunması gerekir. Yanıt nesneleri, bu işlemi yapmak için yöntemlere sahiptir.

main.js içinde aşağıdaki kodla bir readResponseAsJSON işlevi ekleyin:

function readResponseAsJSON(response) {
  return response.json();
}

Ardından, fetchJSON işlevini aşağıdaki kodla değiştirin:

function fetchJSON() {
  fetch('examples/animals.json') // 1
  .then(validateResponse) // 2
  .then(readResponseAsJSON) // 3
  .then(logResult) // 4
  .catch(logError);
}

Komut dosyasını kaydedin ve sayfayı yenileyin. Fetch JSON'ı (JSON'ı getir) tıklayın. examples/animals.json kaynağından gelen JSON'ın (Response nesnesi yerine) günlüğe kaydedildiğini görmek için konsolu kontrol edin.

Açıklama

Ne olduğuna bakalım.

1. Adım: Bir kaynakta getirme işlemi çağrılır, examples/animals.json. Fetch, bir Response nesnesine çözümlenen bir söz döndürür. Söz yerine getirildiğinde yanıt nesnesi validateResponse işlevine iletilir.

2. adım: validateResponse yanıtın geçerli olup olmadığını (200 yanıtı mı?) kontrol eder. Değilse hata verilir, then bloklarının geri kalanı atlanır ve catch bloğu tetiklenir. Bu durum özellikle önemlidir. Bu kontrol olmadan kötü yanıtlar zincir boyunca iletilir ve geçerli bir yanıt almayı gerektiren sonraki kodların bozulmasına neden olabilir. Yanıt geçerliyse readResponseAsJSON'ya iletilir.

3. Adım: readResponseAsJSON, Response.json() yöntemini kullanarak yanıtın gövdesini okur. Bu yöntem, JSON'a çözümlenen bir söz döndürür. Bu söz çözüldüğünde JSON verileri logResult'a iletilir. (response.json() tarafından verilen söz reddedilirse catch bloğu tetiklenir.)

4. Adım. Son olarak, examples/animals.json adresine yapılan orijinal isteğin JSON verileri logResult tarafından günlüğe kaydedilir.

Daha fazla bilgi için

Getirme işlemi JSON ile sınırlı değildir. Bu örnekte bir resim getirip sayfaya ekleyeceğiz.

main.js içinde aşağıdaki kodu içeren bir showImage işlevi yazın:

function showImage(responseAsBlob) {
  const container = document.getElementById('img-container');
  const imgElem = document.createElement('img');
  container.appendChild(imgElem);
  const imgUrl = URL.createObjectURL(responseAsBlob);
  imgElem.src = imgUrl;
}

Ardından, yanıtları Blob olarak okuyan bir readResponseAsBlob işlevi ekleyin:

function readResponseAsBlob(response) {
  return response.blob();
}

fetchImage işlevini aşağıdaki kodla güncelleyin:

function fetchImage() {
  fetch('examples/fetching.jpg')
    .then(validateResponse)
    .then(readResponseAsBlob)
    .then(showImage)
    .catch(logError);
}

Komut dosyasını kaydedin ve sayfayı yenileyin. Resmi getir'i tıklayın. Sayfada, sevimli bir köpeğin sopayı getirdiğini görürsünüz (Bu, getirme şakasıdır!).

Açıklama

Bu örnekte bir resim getiriliyor, examples/fetching.jpg. Önceki alıştırmada olduğu gibi, yanıt validateResponse ile doğrulanır. Yanıt daha sonra Blob olarak okunur (önceki bölümde olduğu gibi JSON olarak değil). Bir resim öğesi oluşturulup sayfaya eklenir ve resmin src özelliği, Blob'u temsil eden bir veri URL'si olarak ayarlanır.

Not: Blob'u temsil eden bir veri URL'si oluşturmak için URL nesnesinin createObjectURL() yöntemi kullanılır. Bu önemli bir noktadır. Bir resmin kaynağını doğrudan Blob olarak ayarlayamazsınız. Blob, veri URL'sine dönüştürülmelidir.

Daha fazla bilgi için

Bu bölüm isteğe bağlı bir meydan okumadır.

fetchText işlevini

  1. getir /examples/words.txt
  2. yanıtı validateResponse ile doğrulayın
  3. Yanıtı metin olarak okuma (ipucu: Response.text()'e bakın)
  4. ve sayfadaki metni gösterir.

Nihai metni göstermeye yardımcı olması için bu showText işlevini kullanabilirsiniz:

function showText(responseAsText) {
  const message = document.getElementById('message');
  message.textContent = responseAsText;
}

Komut dosyasını kaydedin ve sayfayı yenileyin. Metni getir'i tıklayın. fetchText özelliğini doğru şekilde uyguladıysanız sayfada eklenen metni görürsünüz.

Not: HTML'yi getirip innerHTML özelliğini kullanarak eklemek cazip gelebilir ancak dikkatli olun. Bu durum, sitenizi siteler arası komut dosyası çalıştırma saldırılarına açık hâle getirebilir.

Daha fazla bilgi için

Fetch, varsayılan olarak belirli bir kaynağı alan GET yöntemini kullanır. Ancak getirme işlemi diğer HTTP yöntemlerini de kullanabilir.

HEAD isteği gönderme

headRequest işlevini aşağıdaki kodla değiştirin:

function headRequest() {
  fetch('examples/words.txt', {
    method: 'HEAD'
  })
  .then(validateResponse)
  .then(readResponseAsText)
  .then(logResult)
  .catch(logError);
}

Komut dosyasını kaydedin ve sayfayı yenileyin. HEAD isteği'ni tıklayın. Günlüğe kaydedilen metin içeriğinin boş olduğunu gözlemleyin.

Açıklama

fetch yöntemi, ikinci bir isteğe bağlı parametre olan init'yi alabilir. Bu parametre, getirme isteğinin yapılandırılmasına (ör. istek yöntemi, önbellek modu, kimlik bilgileri ve daha fazlası) olanak tanır.

Bu örnekte, init parametresini kullanarak getirme isteği yöntemini HEAD olarak ayarlıyoruz. HEAD istekleri, yanıtın gövdesi boş olması dışında GET istekleriyle aynıdır. Bu tür istekler, yalnızca bir dosyanın meta verilerini istediğiniz ancak dosyanın tüm verilerini aktarmanız gerekmediği durumlarda kullanılabilir.

İsteğe bağlı: Kaynak boyutunu bulma

Dosyanın boyutunu belirlemek için examples/words.txt ile ilgili getirme yanıtının üstbilgilerine bakalım.

Yanıtın content-length özelliğini headers günlüğe kaydetmek için headRequest işlevini güncelleyin (ipucu: üstbilgiler belgelerine ve get yöntemine bakın).

Kodu güncelledikten sonra dosyayı kaydedin ve sayfayı yenileyin. HEAD isteği'ni tıklayın. Konsol, examples/words.txt öğesinin boyutunu (bayt cinsinden) kaydetmelidir.

Açıklama

Bu örnekte, kaynağın kendisi yüklenmeden bir kaynağın boyutunu (bayt cinsinden) istemek için HEAD yöntemi kullanılır (content-length üstbilgisinde gösterilir). Bu, uygulamada tam kaynağın istenip istenmeyeceğini (hatta nasıl istenmesi gerektiğini) belirlemek için kullanılabilir.

İsteğe bağlı: examples/words.txt boyutunu başka bir yöntemle öğrenin ve yanıt başlığındaki değerle eşleştiğini doğrulayın (Bunu belirli işletim sisteminizde nasıl yapacağınızı araştırabilirsiniz. Komut satırını kullandığınız için bonus puan kazanırsınız!).

Daha fazla bilgi için

Getirme işlemi, POST istekleriyle de veri gönderebilir.

Yankı sunucusu kurma

Bu örnek için bir echo sunucusu çalıştırmanız gerekir. fetch-api-lab/app/ dizininden aşağıdaki komutu çalıştırın (komut satırınız localhost:8081 sunucusu tarafından engelleniyorsa yeni bir komut satırı penceresi veya sekmesi açın):

node echo-servers/cors-server.js

Bu komut, localhost:5000/ adresinde basit bir sunucu başlatır ve kendisine gönderilen istekleri geri yansıtır.

Bu sunucuyu istediğiniz zaman ctrl+c ile sonlandırabilirsiniz.

POST isteği gönderme

postRequest işlevini aşağıdaki kodla değiştirin (bölümü tamamlamadıysanız 4. bölümdeki showText işlevini tanımladığınızdan emin olun):

function postRequest() {
  fetch('http://localhost:5000/', {
    method: 'POST',
    body: 'name=david&message=hello'
  })
    .then(validateResponse)
    .then(readResponseAsText)
    .then(showText)
    .catch(logError);
}

Komut dosyasını kaydedin ve sayfayı yenileyin. POST isteği'ni tıklayın. Gönderilen isteğin sayfada yansıtıldığını görün. Ad ve mesajı içermelidir (formdan henüz veri almadığımızı unutmayın).

Açıklama

Fetch ile POST isteği göndermek için yöntemi belirtmek üzere init parametresini kullanırız (önceki bölümde HEAD yöntemini ayarladığımız gibi). Bu bölümde, isteğin gövdesini de ayarlıyoruz. Bu örnekte, basit bir dize kullanılıyor. Gövde, göndermek istediğimiz verilerdir.

Not: Üretim aşamasında, hassas kullanıcı verilerini her zaman şifrelemeyi unutmayın.

Veriler localhost:5000/ adresine POST isteği olarak gönderildiğinde istek, yanıt olarak geri yansıtılır. Yanıt daha sonra validateResponse ile doğrulanır, metin olarak okunur ve sayfada gösterilir.

Uygulamada bu sunucu, üçüncü taraf bir API'yi temsil eder.

İsteğe bağlı: FormData arayüzünü kullanma

Formlardan kolayca veri almak için FormData arayüzünü kullanabilirsiniz.

postRequest işlevinde, msg-form form öğesinden yeni bir FormData nesnesi oluşturun:

const formData = new FormData(document.getElementById('msg-form'));

Ardından, body parametresinin değerini formData değişkeniyle değiştirin.

Komut dosyasını kaydedin ve sayfayı yenileyin. Sayfadaki formu (Ad ve Mesaj alanları) doldurun ve YAYINLA isteğini tıklayın. Sayfada gösterilen form içeriğini inceleyin.

Açıklama

FormData oluşturucu, bir HTML form alıp FormData nesnesi oluşturabilir. Bu nesne, formun anahtarları ve değerleriyle doldurulur.

Daha fazla bilgi için

Non-cors echo sunucusu başlatma

Önceki echo sunucusunu durdurun (komut satırından ctrl+c tuşuna basarak) ve aşağıdaki komutu çalıştırarak fetch-lab-api/app/ dizininden yeni bir echo sunucusu başlatın:

node echo-servers/no-cors-server.js

Bu komut, bu kez localhost:5001/ adresinde başka bir basit echo sunucusu oluşturur. Ancak bu sunucu, kaynaklar arası istekleri kabul edecek şekilde yapılandırılmamıştır.

Yeni sunucudan getirme

Yeni sunucu localhost:5001/ adresinde çalıştığına göre artık bu sunucuya getirme isteği gönderebiliriz.

postRequest işlevini, localhost:5000/ yerine localhost:5001/ kaynağından veri alacak şekilde güncelleyin. Kodu güncelledikten sonra dosyayı kaydedin, sayfayı yenileyin ve POST İsteği'ni tıklayın.

Konsolda, CORS Access-Control-Allow-Origin başlığı eksik olduğundan kaynaklar arası isteğin engellendiğini belirten bir hata almanız gerekir.

postRequest işlevindeki fetch öğesini, hata günlüğünde önerildiği gibi no-cors modunu kullanan ve validateResponse ile readResponseAsText çağrılarını kaldıran aşağıdaki kodla güncelleyin (açıklamayı aşağıda bulabilirsiniz):

function postRequest() {
  const formData = new FormData(document.getElementById('msg-form'));
  fetch('http://localhost:5001/', {
    method: 'POST',
    body: formData,
    mode: 'no-cors'
  })
    .then(logResult)
    .catch(logError);
}

Komut dosyasını kaydedin ve sayfayı yenileyin. Ardından mesaj formunu doldurun ve POST Request'i (POST İsteği) tıklayın.

Konsolda günlüğe kaydedilen yanıt nesnesini inceleyin.

Açıklama

Getirme (ve XMLHttpRequest), aynı kaynak politikasına uyar. Bu, tarayıcıların komut dosyalarından kaynaklar arası HTTP isteklerini kısıtladığı anlamına gelir. Alanlar arası istek, bir alan (örneğin http://foo.com/) ayrı bir alandan (örneğin http://bar.com/) kaynak istediğinde gerçekleşir.

Not: Kaynaklar arası istek kısıtlamaları genellikle kafa karışıklığına neden olur. Resimler, stil sayfaları ve komut dosyaları gibi birçok kaynak alanlar arası (yani kaynaklar arası) olarak getirilir. Ancak bunlar, aynı kaynak politikasının istisnalarıdır. Kaynaklar arası istekler komut dosyalarında hâlâ kısıtlanmaktadır.

Uygulamamızın sunucusu, iki yansıtma sunucusundan farklı bir bağlantı noktası numarasına sahip olduğundan, yansıtma sunucularından birine yapılan istekler kaynaklar arası istek olarak kabul edilir. Ancak localhost:5000/ üzerinde çalışan ilk echo sunucusu, CORS'u destekleyecek şekilde yapılandırılmıştır (echo-servers/cors-server.js'ı açıp yapılandırmayı inceleyebilirsiniz). localhost:5001/ üzerinde çalışan yeni yankı sunucusu çalışmıyor (bu nedenle hata alıyoruz).

mode: no-cors kullanıldığında opak yanıt alınabilir. Bu, yanıt almamıza olanak tanır ancak yanıta JavaScript ile erişimi engeller (bu nedenle validateResponse, readResponseAsText veya showResponse kullanamayız). Yanıt, diğer API'ler tarafından kullanılabilir veya bir hizmet çalışanı tarafından önbelleğe alınabilir.

İstek üstbilgilerini değiştirme

Fetch, istek başlıklarını değiştirmeyi de destekler. 6. bölümdeki localhost:5001 (CORS yok) yansıtma sunucusunu durdurun ve localhost:5000 (CORS) yansıtma sunucusunu yeniden başlatın:

node echo-servers/cors-server.js

localhost:5000/ kaynağından getirme işlemi yapan postRequest işlevinin önceki sürümünü geri yükleyin:

function postRequest() {
  const formData = new FormData(document.getElementById('msg-form'));
  fetch('http://localhost:5000/', {
    method: 'POST',
    body: formData
  })
    .then(validateResponse)
    .then(readResponseAsText)
    .then(showText)
    .catch(logError);
}

Şimdi Content-Type üstbilgisi application/json değerine eşit olan messageHeaders adlı postRequest işlevinin içinde bir Headers nesnesi oluşturmak için Header arayüzünü kullanın.

Ardından, init nesnesinin headers özelliğini messageHeaders değişkeni olarak ayarlayın.

body özelliğini, dizeleştirilmiş bir JSON nesnesi olacak şekilde güncelleyin. Örneğin:

JSON.stringify({ lab: 'fetch', status: 'fun' })

Kodu güncelledikten sonra dosyayı kaydedin ve sayfayı yenileyin. Ardından POST İsteği'ni tıklayın.

Yansıtılan isteğin artık Content-Type değerinin application/json olduğunu (daha önce olduğu gibi multipart/form-data değil) gözlemleyin.

Şimdi Content-Length nesnesine özel bir messageHeaders üstbilgisi ekleyin ve isteğe rastgele bir boyut verin.

Kodu güncelledikten sonra dosyayı kaydedin, sayfayı yenileyin ve POST İsteği'ni tıklayın. Bu başlığın, yansıtılan istekte değiştirilmediğini unutmayın.

Açıklama

Üstbilgi arayüzü, üstbilgi nesnelerinin oluşturulmasını ve değiştirilmesini sağlar. Content-Type gibi bazı üstbilgiler getirme işlemiyle değiştirilebilir. Content-Length gibi diğerleri ise korumalıdır ve güvenlik nedeniyle değiştirilemez.

Özel istek üst bilgileri ayarlama

Getirme işlemi, özel üstbilgilerin ayarlanmasını destekler.

postRequest işlevindeki messageHeaders nesnesinden Content-Length üstbilgisini kaldırın. Özel üstbilgiyi X-Custom rastgele bir değerle (ör. "X-CUSTOM': 'hello world') ekleyin.

Komut dosyasını kaydedin, sayfayı yenileyin ve POST İsteği'ni tıklayın.

Yansıtılan isteğin, eklediğiniz X-Custom özelliğine sahip olduğunu görürsünüz.

Şimdi Headers nesnesine bir Y-Custom üstbilgisi ekleyin. Senaryoyu kaydedin, sayfayı yenileyin ve POST İsteği'ni tıklayın.

Konsolda şuna benzer bir hata mesajı alırsınız:

Fetch API cannot load http://localhost:5000/. Request header field y-custom is not allowed by Access-Control-Allow-Headers in preflight response.

Açıklama

Kaynaklar arası isteklerde olduğu gibi, özel başlıklar da kaynağın istendiği sunucu tarafından desteklenmelidir. Bu örnekte, echo sunucumuz X-Custom üstbilgisini kabul edecek ancak Y-Custom üstbilgisini kabul etmeyecek şekilde yapılandırılmıştır (echo-servers/cors-server.js dosyasını açıp Access-Control-Allow-Headers dosyasını arayarak bunu kendiniz görebilirsiniz). Özel bir üstbilgi ayarlandığında tarayıcı, ön uç denetimi gerçekleştirir. Bu, tarayıcının öncelikle sunucu tarafından hangi HTTP yöntemlerine ve üstbilgilere izin verildiğini belirlemek için sunucuya bir OPTIONS isteği gönderdiği anlamına gelir. Sunucu, orijinal isteğin yöntemini ve başlıklarını kabul edecek şekilde yapılandırılmışsa istek gönderilir, aksi takdirde hata oluşur.

Daha fazla bilgi için

Çözüm kodu

Çalışan kodun bir kopyasını almak için çözüm klasörüne gidin.

Artık Fetch API'yi nasıl kullanacağınızı biliyorsunuz.

Kaynaklar

PWA eğitim kursundaki tüm codelab'leri görmek için kursun Hoş geldiniz codelab'ine göz atın.