AJAX пішіні JSON күтеді, бірақ HTML алады: жауапты кезең-кезеңмен тексеру
200 деген жауап JSON екенін дәлелдемейді. Желі панелін кезең-кезеңмен қарап, тасымал, көрсетілім және шарт ақауларын ажыратыңыз.
Пішін жіберіледі, айналдырғыш шығады, ал консоль JSON ішінде 0 орнында күтпеген < таңбасы бар дейді. Беттің өзі жақсы жүктеледі, сондықтан алғашқы ой парсерді немесе туннельді кінәлау. Әдетте екеуі де қатыспайды: жіберу бетті жүктеуден бөлек сұраныс, ал ол JSON емес нәрсемен қайтты. Браузер шынымен көрсететін ретпен жұмыс істеңіз, себебі төрт мүмкін жауап төрт түрлі түзетуді қажет етеді.
1-қадам: шын мәнінде болған жіберуді ұстап алыңыз
Жіберер алдында Желі панелін ашыңыз, журналды навигациялар арасында жазбаларды сақтайтындай етіп құрыңыз, содан кейін пайдалануға рұқсат етілген тіркелгіде бір зиянсыз сынақ жіберу жасаңыз. Беттің құжат сұранысын емес, пішіннің өзі бастаған сұранысты таңдаңыз.
Сүзгілерден сақ болыңыз. XHR немесе Fetch сүзгісі ыңғайлы, бірақ шеңбер әлі де жасырын iframe немесе динамикалық жасалған пішін арқылы жіберсе, сүзгі жалғыз маңызды сұранысты жасырады. Алдымен сүзгісіз бір рет жіберіп, не шыққанын қараңыз.
Таңдалған сұраныс үшін кез келген түсіндіруден бұрын алты нәрсені жазыңыз: әдіс, сұраныс жолымен қоса толық URL, күйі, қайта бағыттау тізбегі, жауаптың Content-Type және дененің алғашқы жолдары. Chrome DevTools-тың Желі панелінің анықтамасы осылар орналасқан Headers, Response және Initiator көріністерін қамтиды, ал басқа браузерлердің балама панельдері сол өрістерді көрсетеді.
2-қадам: бұл өзіңіз ойлаған сұраныс екеніне көз жеткізіңіз
Таңғаларлық көп JSON қателері шын мәнінде маршруттау қателері. Егер жіберу өңдеушісі preventDefault шақырудан бұрын ерекше жағдай тастаса, браузер action атрибутында жазылған мекенжайға пішіннің байырғы POST-ын жасайды, ал сервер толық HTML бетімен жауап береді. Өңдеуші ешқашан іске қосылмайды, сондықтан JSON ешқашан сұралмаған.
Панельдегі URL-ды JavaScript шақыратын URL-мен салыстырыңыз. Басқа жерде аяқталатын қайта бағыттауды, жетіспейтін немесе артық соңғы көлбеу сызықты, өңдеуші GET жіберіп, соңғы нүкте POST қабылдайтын әдіс сәйкессіздігін немесе көшірілген беттен салыстырмалы жолға жіберетін пішінді іздеңіз. Қайта бағыттау тізбегін соңына дейін бақылап, бірінші емес, соңғы URL-ды жазыңыз.
Содан кейін бастаушыны тексеріңіз. Егер сұраныс сіздің скриптіңізден емес, құжат навигациясынан келсе, мәселені әлдеқашан таптыңыз, ал жауап парсеріндегі ешбір өзгеріс көмектеспейді.
3-қадам: нәтижені төрт санатқа бөліңіз
Әр нәтиже осылардың дәл біреуіне жатады, ал санат әрі қарай қайда қарауды анықтайды.
| 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 |
Ортаңғы жолдарды адамдар дұрыс диагноздамайды, себебі күйі 200. Қайта бағыттаудан кейін жететін кіру беті толығымен жақсы HTTP жауабы және өте нашар JSON құжаты. application/json мазмұн түрі мұны түзетпейді: ол белгі ғана, ал қате белгіленген дене әлі де талданбайды. Қатынау бұғатталды деген жол аяқталған сұранысқа ұқсайды: панель күй көрсетеді, бірақ кросс-шығу тегі саясаты денені ұстап қалады, сондықтан шақырушы скрипт үшін ол уақыт шегі сияқты пайдасыз.
Төртінші жол ескі PHP және шеңбер стектерінде де соншалықты жиі. Кодталған жүктемеден бұрын басылған ескіру ескертуі ешбір JSON парсері қабылдамайтын дене жасайды, ал көбіне сол ескерту бүкіл түсіндірме болады.
4-қадам: парсер қатесін сөзбе-сөз оқыңыз
Қате мәтіні талдауды бұзған бірінші таңбаны атайды, бұл әдетте ешбір болжамсыз санатты анықтайды.
| 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-мен бос дене жеке жағдай: соңғы нүкте іске қосылды, ештеңе шығармады, ал төмендегі бір нәрсе оны сәттілік деп қабылдады. Бұл тасымал емес, қолданба шартының ақауы және оның орны проксиде емес, келесі қадамда. Firefox пен Safari сол төрт ақауды басқаша тұжырымдайды, сондықтан дәл жолға емес, таңбаға немесе бос денеге сәйкестендіріңіз.
5-қадам: дәлелдер нұсқаған қабатты түзетіңіз
Маршруттау мәселесінде сұранысты түзетіңіз: action-ды дұрыстаңыз, өңдеушінің құлауына жол бермеңіз, соңғы нүкте мен әдісті сәйкестендіріңіз және қайта сынаңыз. Көрсетілім мәселесінде денені тудырған нәрсені түзетіңіз және деректер күтілген жерде қате құжаты неге қайтарылатынын анықтаңыз. Шарт мәселесінде шеңбердің нақты күтілетін құрылымын сіз іске қосатын нұсқа үшін оқып, клиентті босаңсытудың орнына жауапты соған сай қалыптастырыңыз.
Қатынауы бұғатталған жауап өз жүрісін қажет етеді, себебі сұраныстың өзі дұрыс болуы мүмкін және дене сіздің кодыңызға ешқашан жетпеуі мүмкін. Жауаптың Access-Control-Allow-Origin мәнін браузер жіберген нақты Origin-мен салыстырыңыз және джокер белгісінің тіркелгі деректері бар сұранысты қанағаттандырмайтынын есте сақтаңыз. Клиенттегі credentials: 'include'-ды сервердегі Access-Control-Allow-Credentials: true-пен жұптастырыңыз және шақыру no-cors режимін қолданбағанын тексеріңіз, онда мөлдір емес дене ақау емес, құжатталған нәтиже.
Парсерді неғұрлым жұмсақ нәрсемен алмастыру — аулақ болу керек жалғыз түзету. Жауапты код ретінде бағалау немесе талданғанша мәтінді қырып тастау шарт сәйкессіздігін жасырады және үнсіздік орнына инъекция бетін қосады. Сол сияқты күйді денеден бөлек тексеру қажет: қолданба деңгейіндегі қате нысанын алып жүретін 200 көптеген API-де қалыпты және жүктемені оқу арқылы өңделуі керек.
Басқа біреудің көмегі қажет болса, шикі экспорттың орнына ең аз жазбаны бөлісіңіз — әдіс, URL, күйі, қайта бағыттаулардан кейінгі соңғы URL, жауаптың мазмұн түрі, дененің пішіні және күтілетін шарт. Желі мұрағаттарында cookie, токендер, сұраныс жолдары және пішінде болған жеке деректер бар, ал автоматты тазартқыш тексеріс емес.
- Кез келген кодты өзгертуден бұрын сұранысты сүзгісіз ұстаңыз.
- Бастаушы сіздің скриптіңіз болғанын және соңғы URL сіздің соңғы нүктеңіз екенін растаңыз.
- Парсерге тиер алдында жауапты жіктеңіз.
- Маршруттауды, қатынауды, көрсетілімді немесе шартты түзетіңіз және ешқашан парсерді босаңсыту арқылы емес.