Ffurf AJAX yn disgwyl JSON ond yn derbyn HTML: dilynwch yr ymateb gam wrth gam
Nid yw ymateb 200 yn brawf mai JSON ydyw. Dilynwch y panel Rhwydwaith gam wrth gam a gwahanwch fethiannau cludo, cynrychioli a chontract.
Mae’r ffurflen yn cyflwyno, mae’r troellwr yn ymddangos, ac mae’r consol yn dweud bod arwydd < annisgwyl mewn JSON ar safle 0. Mae’r dudalen ei hun yn llwytho’n iawn, a dyna pam mai’r redfa gyntaf yw beio’r dosrannydd neu’r tiwnel. Fel arfer nid yw’r naill na’r llall yn rhan ohoni: mae’r cyflwyniad yn gais gwahanol i lwytho’r dudalen, ac mae wedi dod yn ôl gyda rhywbeth nad yw’n JSON. Gweithiwch yn y drefn y mae’r porwr yn ei datgelu mewn gwirionedd, oherwydd mae’r pedwar ateb posibl angen pedwar cywiriad gwahanol.
Cam 1: dal y cyflwyniad a ddigwyddodd mewn gwirionedd
Agorwch y panel Rhwydwaith cyn cyflwyno, gosodwch y cofnod i gadw’r cofnodion ar draws llywio, ac yna gwnewch un cyflwyniad prawf diniwed ar gyfrif y caniateir i chi ei ddefnyddio. Dewiswch y cais a gychwynnwyd gan y ffurflen ei hun, nid cais dogfen y dudalen.
Byddwch yn ofalus gyda hidlyddion. Mae hidlydd XHR neu Fetch yn gyfleus, ond os yw’r fframwaith yn dal i gyflwyno drwy iframe cudd neu ffurflen a grëwyd yn ddeinamig, bydd yr hidlydd yn cuddio’r un cais sy’n bwysig. Cyflwynwch unwaith heb hidlydd yn gyntaf a gwyliwch beth sy’n ymddangos.
Ar gyfer y cais a ddewiswyd, cofnodwch chwe pheth cyn dehongli unrhyw beth: y dull, yr URL llawn gan gynnwys y llinyn ymholi, y statws, y gadwyn ailgyfeirio, Content-Type yr ymateb, a llinellau cyntaf y corff. Mae’r cyfeirlyfr panel Rhwydwaith Chrome DevTools yn cynnwys y golygfeydd Headers, Response ac Initiator lle mae’r rhain, ac mae paneli cyfatebol mewn porwyr eraill yn dangos yr un meysydd.
Cam 2: cadarnhewch mai’r cais rydych chi’n meddwl ydyw
Mae nifer syfrdanol o wallau JSON mewn gwirionedd yn wallau llwybro. Os yw’r triniwr cyflwyno yn taflu cyn iddo alw preventDefault, mae’r porwr yn gwneud POST ffurflen brodorol i beth bynnag y mae’r priodoledd action yn ei ddweud, ac mae’r gweinydd yn ateb â thudalen HTML gyflawn. Nid yw’r triniwr byth yn rhedeg, felly ni ofynnwyd am JSON o gwbl.
Cymharwch yr URL yn y panel â’r URL y mae eich JavaScript yn ei alw. Chwiliwch am ailgyfeiriad sy’n gorffen yn rhywle arall, slaes olaf ar goll neu yn ormod, anghysondeb dull lle mae’r triniwr yn anfon GET ac mae’r pen terfyn yn derbyn POST, neu ffurflen yn postio i lwybr cymharol o dudalen sydd wedi symud. Dilynwch y gadwyn ailgyfeirio i’r diwedd a nodwch yr URL terfynol, nid yr un cyntaf.
Yna gwiriwch y cychwynnydd. Os daeth y cais o lywio dogfen yn hytrach na’ch sgript, rydych eisoes wedi dod o hyd i’r broblem, ac ni fydd unrhyw newid i ddosrannydd yr ymateb yn helpu.
Cam 3: rhennwch y canlyniad yn bedair categori
Mae pob canlyniad yn perthyn yn union i un o’r rhain, ac mae’r gategori yn penderfynu ble i edrych nesaf.
| 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 |
Y rhesi canol yw’r rhai y mae pobl yn eu camddiagnosio, oherwydd mai 200 yw’r statws. Mae tudalen mewngofnodi a gyrhaeddir ar ôl ailgyfeiriad yn ymateb HTTP hollol dda ac yn ddogfen JSON ofnadwy. Nid yw’r math o gynnwys application/json yn trwsio hynny: label ydyw, ac mae corff wedi’i labelu’n anghywir yn dal i fethu â’i ddosrannu. Mynediad wedi’i rwystro yw’r rhes sy’n edrych fel cais wedi’i gwblhau: mae’r panel yn dangos statws, ond mae’r polisi traws-darddiad yn atal y corff, felly i’r sgript sy’n galw mae mor ddiwerth ag amseroedd allan.
Mae’r bedwaredd rhes yr un mor gyffredin ar staciau PHP a fframwaith hŷn. Mae rhybudd dirymu a argraffwyd cyn y tâl wedi’i amgodio yn cynhyrchu corff na fydd unrhyw ddosrannydd JSON yn ei dderbyn, a’r rhybudd hwnnw yn aml yw’r esboniad cyfan.
Cam 4: darllenwch wall y dosrannydd yn llythrennol
Mae testun y gwall yn enwi’r arwydd cyntaf a dorrodd y dosrannu, sy’n nodi’r categori fel arfer heb unrhyw ddyfalu.
| 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 |
Mae corff gwag gyda 200 yn achos ar wahân: rhedegodd y pen terfyn, ni chynhyrchodd ddim, ac mae rhywbeth i lawr yr afon wedi cymryd hynny fel llwyddiant. Methiant contract cymhwysiad yw hwnnw, nid methiant cludo, ac mae’i le yn y cam nesaf, nid yn y dirprwy. Mae Firefox a Safari yn geirio’r un pedwar methiant yn wahanol, felly cyfatebwch ar yr arwydd neu’r corff gwag yn hytrach nag ar y llinyn union.
Cam 5: trwsiwch yr haen y mae’r dystiolaeth yn cyfeirio ati
Ar gyfer problem llwybro, trwsiwch y cais: cywirwch yr action, atalwch y triniwr rhag syrthio drwodd, gwnewch i’r pen terfyn a’r dull gyd-fynd, ac ailbrofwch. Ar gyfer problem cynrychioli, trwsiwch yr hyn a gynhyrchodd y corff, a darganfyddwch pam mae dogfen gwall yn cael ei dychwelyd lle’r oedd disgwyl data. Ar gyfer problem contract, darllenwch strwythur disgwyliedig gwirioneddol y fframwaith ar gyfer y fersiwn rydych yn ei rhedeg, a siapwch yr ymateb iddo yn lle llacio’r cleient.
Mae angen taith ei hun ar ymateb â mynediad wedi’i rwystro, oherwydd gall y cais ei hun fod yn gywir ac efallai na fydd y corff byth yn cyrraedd eich cod. Cymharwch Access-Control-Allow-Origin yr ymateb â’r Origin union a anfonwyd gan y porwr, a chofiwch nad yw cardyn gwyllt yn bodloni cais â’rhybuddion. Parwch credentials: 'include' ar y cleient gyda Access-Control-Allow-Credentials: true ar y gweinydd, a gwiriwch a ddefnyddiodd yr alwad fodd no-cors, lle mae corff afloyw yn ganlyniad dogfennedig yn hytrach na nam.
Amnewid y dosrannydd â rhywbeth mwy goddefgar yw’r un cywiriad i’w osgoi. Mae gwerthuso’r ymateb fel cod, neu stripio testun nes iddo ddosrannu, yn cuddio’r anghysondeb contract ac yn ychwanegu arwyneb chwistrellu yn gyfnewid am ddistawrwydd. Yr un modd, mae gwirio’r statws ar wahân i’r corff yn angenrheidiol: mae 200 sy’n cario gwrthrych gwall ar lefel cymhwysiad yn normal mewn llawer o API, a rhaid ei drin drwy ddarllen y tâl.
Pan fyddwch angen help gan rywun arall, rhennwch gofnod bychan — dull, URL, statws, URL terfynol ar ôl ailgyfeirio, math cynnwys yr ymateb, siâp y corff, a’r contract disgwyliedig — yn hytrach nag allgludiad crai. Mae archifau rhwydwaith yn cynnwys cwcis, tocynnau, llinynnau ymholi a’r data personol oedd yn y ffurflen, ac nid yw glanhawr awtomatig yn adolygiad.
- Delwch y cais heb hidlydd cyn newid unrhyw god.
- Cadarnhewch mai’ch sgript oedd y cychwynnydd a mai’ch pen terfyn yw’r URL terfynol.
- Dosbarthwch yr ymateb cyn cyffwrdd â’r dosrannydd.
- Trwsiwch lwybro, mynediad, cynrychioli neu gontract, ac yn awr byth drwy lacio’r dosrannydd.