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-тай харьцуул. Өөр газар төгсдөг дахин чиглүүлэлт, дутуу эсвэл илүү эцсийн налуу зураас, аргын зөрүү, эсвэл шилжсэн хуудсаас харьцангуй зам руу илгээдэг форм хай. Дахин чиглүүлэлтийн гинжийг эцэс хүртэл дагаж, эхний биш эцсийн 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, хариултын агуулгын төрөл, биеийн хэлбэр, хүлээгдэж буй гэрээ. Сүлжээний архивт күүки, токен, хүсэлтийн мөр, форм дахь хувийн мэдээлэл байдаг бөгөөд автомат цэвэрлэгч нь хяналт биш.
- Ямар ч код өөрчлөхөөс өмнө хүсэлтийг шүүлтүүргүйгээр барь.
- Эхлүүлэгч таны скрипт байсан, эцсийн URL таны төгсгөлийн цэг гэдгийг батал.
- Парсерт хүрэхээс өмнө хариултыг ангил.
- Чиглүүлэлт, хандалт, дүрслэл эсвэл гэрээг зас, хэзээ ч парсерыг суллах замаар биш.