AJAX forması JSON gözləyir, amma HTML alır: cavabı addım-addım araşdırın
200 statusu JSON olduğunu sübut etmir. Şəbəkə panelini addım-addım izləyin və nəqliyyat, təqdimat və müqavilə nasazlıqlarını ayırın.
Forma göndərilir, fırlanan göstərici görünür və konsol JSON-da 0 mövqeyində gözlənilməz < simvolu olduğunu yazır. Səhifə özü yaxşı yüklənir, buna görə ilk instinkt analizatoru və ya tuneli günahlandırmaq olur. Adətən heç biri iştirak etmir: göndərmə səhifənin yüklənməsindən fərqli sorğudur və cavab JSON olmayan bir şeylə qayıdıb. İşi brauzerin həqiqətən açdığı ardıcıllıqla aparın, çünki dörd mümkün cavab dörd fərqli düzəliş tələb edir.
Addım 1: həqiqətən baş verən göndərməni tutun
Göndərməzdən əvvəl Şəbəkə panelini açın, jurnalı naviqasiya boyunca saxlanılacaq şəkildə qurun, sonra istifadə etməyə icazə verilən hesabda bir zərərsiz sınaq göndərməsi edin. Səhifənin sənəd sorğusunu deyil, formanın özünün başlatdığı sorğunu seçin.
Filtrlərdən ehtiyatlı olun. XHR və ya Fetch filtri rahatdır, amma çərçivə hələ də gizli iframe və ya dinamik yaradılan forma vasitəsilə göndərirsə, filtr vacib olan yeganə sorğunu gizlədəcək. Əvvəlcə filtrsiz bir dəfə göndərin və nə göründüyünə baxın.
Seçdiyiniz sorğu üçün hər hansı şərh verməzdən əvvəl altı şeyi qeyd edin: metod, sorğu sətri daxil olmaqla tam URL, status, yönləndirmə zənciri, cavabın Content-Type-ı və gövdənin ilk sətirləri. Chrome DevTools-un Şəbəkə paneli arayışı bunların yerləşdiyi Headers, Response və Initiator görünüşlərini əhatə edir, digər brauzerlərdəki ekvivalent panellər də eyni sahələri göstərir.
Addım 2: bunun düşündüyünüz sorğu olduğunu təsdiqləyin
Təəccüblü sayda JSON xətası əslində marşrutlaşdırma xətasıdır. Əgər göndərmə işləyicisi preventDefault çağırmazdan əvvəl xəta atırsa, brauzer action atributunun dediyi ünvana yerli form POST edir və server tam HTML səhifəsi ilə cavab verir. İşləyici heç vaxt işləmir, yəni JSON heç vaxt tələb olunmayıb.
Paneldəki URL-i JavaScript-inizin çağırdığı URL ilə müqayisə edin. Başqa yerdə bitən yönləndirmə, çatışmayan və ya artıq son kəsik, işləyicinin GET göndərdiyi, son nöqtənin isə POST qəbul etdiyi metod uyğunsuzluğu, yaxud köçmüş səhifədən nisbi yola göndərən forma axtarın. Yönləndirmə zəncirini sona qədər izləyin və birincini deyil, son URL-i qeyd edin.
Sonra başladıcını yoxlayın. Sorğu skriptinizdən deyil, sənəd naviqasiyasından gəlibsə, problemi artıq tapmısınız və cavab analizatorunda heç bir dəyişiklik kömək etməyəcək.
Addım 3: nəticəni dörd kateqoriyaya ayırın
Hər nəticə məhz bunlardan birinə aiddir və kateqoriya bundan sonra hara baxacağınızı müəyyən edir.
| 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 sətirləri insanlar səhv diaqnoz edir, çünki status 200-dür. Yönləndirmədən sonra çatılan giriş səhifəsi tamamilə yaxşı HTTP cavabı və çox pis JSON sənətidir. application/json məzmun tipi bunu düzəltmir: bu bir etiketdir və səhv etiketlənmiş gövdə yenə də təhlil olunmur. Giriş bloklandı sətri tamamlanmış sorğu kimi görünür: panel status göstərir, amma mənbələr arası siyasət gövdəni tutur, buna görə çağıran skript üçün o, fasilə qədər yararsızdır.
Dördüncü sətir köhnə PHP və çərçivə yığınlarında eyni dərəcədə geniş yayılmışdır. Kodlanmış yükdən əvvəl çap olunan köhnəlmə xəbərdarlığı heç bir JSON analizatorunun qəbul etməyəcəyi gövdə yaradır və xəbərdarlıq çox vaxt bütün izahat olur.
Addım 4: analizator xətasını hərfi oxuyun
Xəta mətni təhlili pozan ilk simvolun adını çəkir və bu, adətən heç bir təxmin etmədən kateqoriyanı müəyyən edir.
| 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 ilə boş gövdə ayrı bir haldır: son nöqtə işlədi, heç nə istehsal etmədi və aşağıda nəsə bunu uğur kimi qəbul etdi. Bu, nəqliyyat nasazlığı deyil, tətbiq müqaviləsi nasazlığıdır və yeri proksidə deyil, növbəti addımdadır. Firefox və Safari eyni dörd nasazlığı başqa cür ifadə edir, buna görə dəqiq mətnə deyil, simvola və ya boş gövdəyə uyğunlaşdırın.
Addım 5: sübutun göstərdiyi qatı düzəldin
Marşrutlaşdırma problemi üçün sorğunu düzəldin: action-u düzəldin, işləyicinin aşağı düşməsinin qarşısını alın, son nöqtə ilə metodu uyğunlaşdırın və yenidən sınaqdan keçirin. Təqdimat problemi üçün gövdəni yaradan şeyi düzəldin və məlumat gözlənilən yerdə səhv sənədinin niyə qaytarıldığını öyrənin. Müqavilə problemi üçün işlətdiyiniz versiya üçün çərçivənin həqiqətən gözlədiyi strukturu oxuyun və müştərini boşaltmaq əvəzinə cavabı ona uyğun formalaşdırın.
Giriş bloklanan cavab ayrıca mərhələ tələb edir, çünki sorğunun özü düzgün ola bilər və gövdə heç vaxt kodunuza çatmaya bilər. Cavabın Access-Control-Allow-Origin dəyərini brauzerin göndərdiyi dəqiq Origin ilə müqayisə edin və vəhşi kartın etimadnaməli sorğunu təmin etmədiyini unutmayın. Müştəridə credentials: 'include' ilə serverdə Access-Control-Allow-Credentials: true cütləşdirin və çağırışın no-cors rejimindən istifadə edib-etmədiyini yoxlayın, burada qeyri-şəffaf gövdə xəta deyil, sənədləşdirilmiş nəticədir.
Analizatoru daha mülayim bir şeylə əvəz etmək qaçmaq lazım olan yeganə düzəlişdir. Cavabı kod kimi qiymətləndirmək və ya təhlil olunana qədər mətni soymaq müqavilə uyğunsuzluğunu gizlədir və sükut müqabilində inyeksiya səthi əlavə edir. Eynilə, statusu gövdədən ayrı yoxlamaq tələb olunur: tətbiq səviyyəli xəta obyekti daşıyan 200 bir çox API-də normaldır və yükü oxumaqla idarə olunmalıdır.
Başqasından kömək lazım olanda xam ixrac yox, minimal qeyd paylaşın — metod, URL, status, yönləndirmələrdən sonrakı son URL, cavabın məzmun tipi, gövdənin forması və gözlənilən müqavilə. Şəbəkə arxivlərində kukilər, tokenlər, sorğu sətirləri və formada olan şəxsi məlumatlar var və avtomatik təmizləyici rəy deyil.
- Hər hansı kodu dəyişməzdən əvvəl sorğunu filtrsiz tutun.
- Başladıcının skriptiniz, son URL-in isə son nöqtəniz olduğunu təsdiqləyin.
- Analizatora toxunmazdan əvvəl cavabı təsnif edin.
- Marşrutlaşdırma, giriş, təqdimat və ya müqaviləni düzəldin və heç vaxt analizatoru yumşaltmaqla yox.