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 உங்கள் முனை என்பதையும் உறுதிப்படுத்துங்கள்.
- பாகுபடுத்தியைத் தொடுவதற்கு முன் பதிலை வகைப்படுத்துங்கள்.
- வழிமாற்றல், அணுகல், பிரதிநிதித்துவம் அல்லது ஒப்பந்தத்தைச் சரிசெய்யுங்கள், பாகுபடுத்தியைத் தளர்த்தி ஒருபோதும் அல்ல.