الخطأخطأ في SyntaxError: الرمز المميز ‘<‘، “<!DOCTYPE”… غير صالح JSON (أو “رمز مميز غير متوقع في JSON في الموضع 0”) يعني أنك حاولت تحليل شيء ليس JSON – عادةً ما تكون صفحة خطأ HTML أو استجابة فارغة. وإليك كيفية تشخيصه وإصلاحه.
📋 Table of Contents
- ماذا يعني هذا الخطأ
- السبب الأول: قام الخادم بإرجاع صفحة خطأ HTML
- السبب 2: نص الاستجابة الفارغ
- السبب 3: عنوان URL / نقطة نهاية واجهة برمجة التطبيقات غير صحيحة
- السبب 4: التحليل المزدوج لـ JSON الذي تم تحليله بالفعل
- السبب 5: أحرف زائدة أو JSON غير صالح
- نمط الجلب القوي
- خطوات التصحيح
- الأسئلة المتداولة
- الخلاصة
ماذا يعني هذا الخطأ
لقد اتصلتJSON.parse() or response.json() على استجابة غير صالحة JSON. تعتبر أدلة “الموضع 0″ و”<” أساسية: الموضع 0 يعني أن الحرف الأول خاطئ، و”<” يعني أن الاستجابة تبدأ بـ HTML (مثل<!DOCTYPE html>) – لقد حصلت على صفحة خطأ HTML بدلاً من JSON.
السبب الأول: قام الخادم بإرجاع صفحة خطأ HTML
// 🐛 The API returned a 404/500 HTML page, not JSON
const response = await fetch('/api/data');
const data = await response.json(); // ❌ fails - response is HTML
// The response body is something like:
//
404 Not Found ...
// JSON.parse chokes on the '<' at position 0
// ✅ Check the response status and content type first
const response = await fetch('/api/data');
if (!response.ok) {
throw new Error(`HTTP ${response.status}: ${response.statusText}`);
}
const contentType = response.headers.get('content-type');
if (!contentType?.includes('application/json')) {
const text = await response.text();
throw new Error(`Expected JSON but got: ${text.slice(0, 100)}`);
}
const data = await response.json();السبب 2: نص الاستجابة الفارغ
// 🐛 Parsing an empty response (e.g., 204 No Content)
const data = await response.json(); // ❌ fails if body is empty
// ✅ Handle empty bodies
const text = await response.text();
const data = text ? JSON.parse(text) : null;
// ✅ Or check status
if (response.status === 204) {
return null; // No Content - nothing to parse
}
const data = await response.json();السبب 3: عنوان URL / نقطة نهاية واجهة برمجة التطبيقات غير صحيحة
// 🐛 Wrong URL returns your app's HTML (SPA fallback) instead of API JSON
fetch('/api/users') // typo or wrong path
// If /api/users doesn't exist, the server may return index.html
// (common with SPAs) - which starts with '<' -> parse error
// ✅ Verify the URL is correct and the endpoint exists
// Check the Network tab to see what the response actually is
// Ensure API routes are registered and the path is exactالسبب 4: التحليل المزدوج لـ JSON الذي تم تحليله بالفعل
// 🐛 The data is already an object, but you parse it again
const data = await response.json(); // already parsed to an object
const parsed = JSON.parse(data); // ❌ parsing an object fails
// ✅ response.json() already parses - don't parse again
const data = await response.json(); // done - it's an object
// axios also auto-parses:
const { data } = await axios.get('/api'); // data is already parsedالسبب 5: أحرف زائدة أو JSON غير صالح
// 🐛 The JSON has a syntax error (trailing comma, single quotes)
JSON.parse('{"name": "Alice",}'); // ❌ trailing comma
JSON.parse("{'name': 'Alice'}"); // ❌ single quotes not valid JSON
JSON.parse('{name: "Alice"}'); // ❌ unquoted key
// ✅ Valid JSON requires double quotes, no trailing commas
JSON.parse('{"name": "Alice"}'); // ✓ validنمط الجلب القوي
async function fetchJSON(url, options) {
const response = await fetch(url, options);
// Check status
if (!response.ok) {
const text = await response.text();
throw new Error(`HTTP ${response.status}: ${text.slice(0, 200)}`);
}
// Handle empty responses
const text = await response.text();
if (!text) return null;
// Parse safely with a helpful error
try {
return JSON.parse(text);
} catch (err) {
throw new Error(`Invalid JSON response: ${text.slice(0, 200)}`);
}
}
// Usage
try {
const data = await fetchJSON('/api/users');
} catch (err) {
console.error('Fetch failed:', err.message); // clear error, not cryptic
}خطوات التصحيح
// 1. Log the raw response text to see what you actually got
const response = await fetch(url);
const text = await response.text();
console.log('Raw response:', text); // reveals HTML, empty, or malformed JSON
// 2. Check the Network tab in DevTools
// - Status code (200? 404? 500?)
// - Content-Type header (application/json?)
// - Response body (is it actually JSON?)
// 3. Test the endpoint directly
curl -i https://api.example.com/data
// See the exact status, headers, and bodyالأسئلة المتداولة
س: لماذا يذكر الخطأ “<” أو “<!DOCTYPE”؟
ج: لأن الاستجابة تبدأ بـ HTML، وليس JSON. لقد حصلت على صفحة HTML (عادةً صفحة خطأ 404 أو 500، أو ملف Index.html الخاص بـ SPA الخاص بك) بدلاً من JSON المتوقع. “<” هو الحرف الأول من علامة HTML، وهو ليس JSON صالحًا.
س: لماذا يعمل في بعض الأحيان دون الآخرين؟
ج: يفشل الأمر عندما يعرض الخادم صيغة غير JSON — صفحة خطأ (404/500)، أو نص فارغ، أو إعادة توجيه إلى HTML. إنه يعمل عندما تقوم واجهة برمجة التطبيقات (API) بإرجاع JSON المناسب. غالبًا ما يعني الفشل المتقطع أن واجهة برمجة التطبيقات (API) تخطئ أحيانًا وتعيد صفحات خطأ HTML.
س: كيف أمنع هذا الخطأ؟
ج: تحقق دائمًا منresponse.ok ونوع المحتوى قبل الاتصالresponse.json()، والتعامل مع الأجسام الفارغة، ولف التحليل في محاولة/التقاط. استخدم برنامج جلب قويًا (كما هو موضح أعلاه) يعطي أخطاء واضحة بدلاً من رسالة “الرمز المميز غير المتوقع” المبهمة.
س: أحصل على HTML الخاص بتطبيقي بدلاً من بيانات API. لماذا؟
ج: من المحتمل أن يكون عنوان URL الخاص بواجهة برمجة التطبيقات (API) الخاص بك خاطئًا أو أن نقطة النهاية غير موجودة، لذلك يعود الخادم إلى تقديم ملف Index.html الخاص بـ SPA الخاص بك (والذي يبدأ بـ <!DOCTYPE). تحقق من صحة مسار واجهة برمجة التطبيقات (API) ومن تسجيل نقطة النهاية. تحقق من علامة التبويب “الشبكة” لرؤية الاستجابة الفعلية.
س: هل يجب علي استخدام Response.json() أو Response.text() ثم JSON.parse()؟
A: response.json() يعد أمرًا ملائمًا ولكنه يلقي خطأً خفيًا على JSON غير صالح. باستخدامresponse.text() ثمJSON.parse() في محاولة/التقاط يتيح لك فحص الاستجابة الأولية وإعطاء رسالة خطأ واضحة عندما لا تكون JSON – وهو أفضل لتصحيح الأخطاء.
الخلاصة
“SyntaxError: رمز مميز غير متوقع في JSON في الموضع 0” يعني أنك حاولت تحليل غير JSON – دائمًا ما تكون صفحة خطأ HTML (تبدأ بـ “<“) أو استجابة فارغة. الإصلاح:تحققresponse.ok ورأس نوع المحتوى قبل التحليل، والتعامل مع النصوص الفارغة، ولف JSON.parse في محاولة/التقاط. يخبرك الدليل “<” أن الاستجابة هي HTML، لذا تحقق من السبب – عادةً ما يكون عنوان URL خاطئًا، أو خطأ في الخادم يعرض صفحة خطأ HTML، أو احتياطي SPA. استخدم برنامج جلب قويًا يسجل الاستجابة الأولية ويعطي أخطاء واضحة. بمجرد التحقق من الاستجابة قبل تحليلها، يصبح هذا الخطأ المبهم خطأً إعلاميًا يوجهك مباشرة إلى المشكلة الحقيقية.
🔗 Share this article
✍️ Leave a Comment