Bir AJAX formu JSON bekliyor ama HTML alıyor: yanıtı adım adım inceleyin
200 yanıtı JSON olduğunu kanıtlamaz. Ağ panelini adım adım inceleyin ve taşıma, sunum ile sözleşme arızalarını ayırın.
Form gönderilir, dönen simge görünür ve konsol JSON içinde 0 konumunda beklenmeyen bir < belirteci olduğunu söyler. Sayfanın kendisi sorunsuz yüklenir, bu yüzden ilk dürtü ayrıştırıcıyı ya da tüneli suçlamaktır. Genellikle ikisi de işin içinde değildir: gönderme, sayfanın yüklenmesinden farklı bir istektir ve JSON olmayan bir şeyle geri dönmüştür. Tarayıcının gerçekten ortaya çıkardığı sırayla çalışın, çünkü dört olası yanıt dört farklı düzeltme gerektirir.
Adım 1: gerçekten olan göndermeyi yakalayın
Göndermeden önce Ağ panelini açın, günlüğü gezinmeler arasında kayıtları koruyacak şekilde ayarlayın ve ardından kullanmanıza izin verilen bir hesapta zararsız bir deneme gönderimi yapın. Sayfanın belge isteğini değil, formun kendi başlattığı isteği seçin.
Filtrelere dikkat edin. XHR veya Fetch filtresi kullanışlıdır, ancak çerçeve hâlâ gizli bir iframe ya da dinamik olarak oluşturulan form üzerinden gönderiyorsa filtre, önemli olan tek isteği gizler. Önce bir kez filtresiz gönderin ve ne çıktığına bakın.
Seçilen istek için herhangi bir yorumdan önce altı şeyi yazın: yöntem, sorgu dizesiyle birlikte tam URL, durum, yönlendirme zinciri, yanıtın Content-Type değeri ve gövdenin ilk satırları. Chrome DevTools Ağ paneli başvurusu bunların bulunduğu Headers, Response ve Initiator görünümlerini kapsar ve diğer tarayıcılardaki eşdeğer paneller aynı alanları gösterir.
Adım 2: düşündüğünüz istek olduğunu doğrulayın
Şaşırtıcı sayıda JSON hatası aslında yönlendirme hatasıdır. Gönderme işleyicisi preventDefault çağırmadan önce istisna fırlatırsa tarayıcı, action özniteliğinin söylediği adrese yerel bir form POST gönderir ve sunucu tam bir HTML sayfasıyla yanıt verir. İşleyici hiç çalışmaz, yani JSON hiç istenmemiştir.
Paneldeki URL ile JavaScript kodunuzun çağırdığı URL karşılaştırın. Başka yerde biten bir yönlendirme, eksik ya da fazla son eğik çizgi, işleyicinin GET gönderdiği ama uç noktanın POST kabul ettiği bir yöntem uyuşmazlığı veya taşınmış bir sayfadan göreli yola gönderen bir form arayın. Yönlendirme zincirini sonuna kadar izleyin ve ilkini değil son URL’yi not edin.
Ardından başlatıcıyı denetleyin. İstek betiğinizden değil belge gezinmesinden geldiyse sorunu buldunuz demektir ve yanıt ayrıştırıcısındaki hiçbir değişiklik yardımcı olmaz.
Adım 3: sonucu dört kategoriye ayırın
Her sonuç tam olarak bunlardan birine girer ve kategori bundan sonra nereye bakacağınızı belirler.
| What you see | Category | Where to look |
|---|---|---|
| Request never finishes, TLS or connection error | No usable response | Endpoint reachability, certificate, front-end timeout |
| Request completes, script gets an opaque failure | Access blocked | Cross-origin policy, credentials mode, missing response header |
| 200 with an HTML body or a login form | Wrong representation | Redirect, expired session, route fallback, error handler |
| Body begins with a notice then valid JSON | Wrong representation | Server-side warning output before serialisation |
| Valid JSON, framework rejects it | Contract mismatch | Envelope shape, field names, value types |
Orta satırlar yanlış teşhis edilenlerdir, çünkü durum 200’dür. Yönlendirmeden sonra ulaşılan oturum açma sayfası tamamen iyi bir HTTP yanıtı ve çok kötü bir JSON belgesidir. application/json içerik türü bunu düzeltmez: bu bir etikettir ve yanlış etiketlenmiş gövde yine ayrıştırılamaz. Erişim engellendi, tamamlanmış istek gibi görünen satırdır: panel bir durum gösterir ama çapraz kaynak ilkesi gövdeyi tutar, bu yüzden çağıran betik için zaman aşımı kadar kullanışsızdır.
Dördüncü satır eski PHP ve çerçeve yığınlarında aynı derecede yaygındır. Kodlanmış yükten önce yazdırılan bir kullanımdan kaldırma uyarısı, hiçbir JSON ayrıştırıcısının kabul etmeyeceği bir gövde üretir ve çoğu zaman o uyarı tüm açıklamadır.
Adım 4: ayrıştırıcı hatasını harfi harfine okuyun
Hata metni ayrıştırmayı bozan ilk karakteri adlandırır ve bu genellikle hiç tahmin yürütmeden kategoriyi tanımlar.
| Error text (Chrome/V8) | What it means |
|---|---|
| Unexpected token < in JSON at position 0 | The body starts with markup: an HTML page or an error document |
| Unexpected end of JSON input | Empty body, or the response was truncated |
| Unexpected token o in JSON at position 1 | You parsed something already parsed, typically an object rather than text |
| Unexpected token u | The body starts with the bare word undefined, usually an empty response rendered as a string |
200 ile boş gövde ayrı bir durumdur: uç nokta çalıştı, hiçbir şey üretmedi ve aşağıdaki bir şey bunu başarı saydı. Bu taşıma değil uygulama sözleşmesi arızasıdır ve yeri proxy’de değil sonraki adımdadır. Firefox ve Safari aynı dört arızayı farklı biçimde ifade eder, bu yüzden tam dizeye değil karaktere veya boş gövdeye göre eşleştirin.
Adım 5: kanıtların işaret ettiği katmanı düzeltin
Yönlendirme sorununda isteği düzeltin: action’ı düzeltin, işleyicinin düşmesini engelleyin, uç nokta ile yöntemi eşleştirin ve yeniden test edin. Sunum sorununda gövdeyi üreten şeyi düzeltin ve verinin beklendiği yerde neden hata belgesi döndüğünü bulun. Sözleşme sorununda çerçevenin çalıştırdığınız sürüm için gerçekte beklediği yapıyı okuyun ve istemciyi gevşetmek yerine yanıtı ona göre biçimlendirin.
Erişimi engellenmiş yanıt kendi turunu gerektirir, çünkü isteğin kendisi doğru olabilir ve gövde kodunuza hiç ulaşmayabilir. Yanıtın Access-Control-Allow-Origin değerini tarayıcının gönderdiği tam Origin ile karşılaştırın ve joker karakterin kimlik bilgili bir isteği karşılamadığını unutmayın. İstemcide credentials: 'include' ile sunucuda Access-Control-Allow-Credentials: true eşleştirin ve çağrının no-cors kipini kullanıp kullanmadığını denetleyin; orada opak gövde kusur değil belgelenmiş sonuçtur.
Ayrıştırıcıyı daha hoşgörülü bir şeyle değiştirmek kaçınılması gereken tek düzeltmedir. Yanıtı kod olarak değerlendirmek veya ayrıştırılana kadar metni soymak sözleşme uyuşmazlığını gizler ve sessizlik karşılığında bir enjeksiyon yüzeyi ekler. Aynı şekilde durumu gövdeden ayrı denetlemek zorunludur: uygulama düzeyinde hata nesnesi taşıyan bir 200 birçok API’de normaldir ve yükü okuyarak ele alınmalıdır.
Başkasından yardım gerektiğinde ham dışa aktarım yerine asgari bir kayıt paylaşın — yöntem, URL, durum, yönlendirmelerden sonraki son URL, yanıtın içerik türü, gövdenin biçimi ve beklenen sözleşme. Ağ arşivleri çerezleri, belirteçleri, sorgu dizelerini ve formda bulunan kişisel verileri içerir ve otomatik temizleyici bir inceleme değildir.
- Herhangi bir kodu değiştirmeden önce isteği filtresiz yakalayın.
- Başlatıcının betiğiniz olduğunu ve son URL’nin uç noktanız olduğunu doğrulayın.
- Ayrıştırıcıya dokunmadan önce yanıtı sınıflandırın.
- Yönlendirmeyi, erişimi, sunumu veya sözleşmeyi düzeltin ve asla ayrıştırıcıyı gevşeterek değil.