حل مشكلة req.body غير المعرف في Express.js

جمال الحزازي
حل مشكلة <code>req.body</code> غير المعرف في Express.js
شفافية المحتوى: تم توليد وتنسيق هذا المقال آلياً عبر محرك صِوان AI لتقديم محتوى تقني دقيق، مباشر، وخالٍ من الحشو المزعج.

في تطوير تطبيقات الويب باستخدام Express.js، قد تواجه مشكلة شائعة حيث تجد أن الكائن req.body غير معرف (undefined) عند محاولة الوصول إلى البيانات المرسلة في جسم الطلب (request body). تحدث هذه المشكلة عادةً عندما لا يقوم Express بمعالجة أو تحليل جسم الطلب بشكل صحيح. يهدف هذا المقال إلى تقديم حلول عملية ومباشرة لهذه المشكلة.

لماذا يكون req.body غير معرف؟

بشكل افتراضي، لا يقوم Express.js بتحليل جسم الطلب القادم من العميل. هذا يعني أنه إذا أرسل العميل بيانات بتنسيق JSON أو URL-encoded أو أي تنسيق آخر في جسم الطلب، فإن Express لن يتعرف عليها تلقائيًا ولن يملأ الكائن req.body بها. للوصول إلى هذه البيانات، يجب عليك استخدام middleware مخصص لتحليل جسم الطلب.

الحل: استخدام الـ Middleware المدمج في Express

الحل الأكثر شيوعًا وفعالية لهذه المشكلة هو استخدام الـ middleware المدمج في Express لتحليل جسم الطلب. Express يوفر دوال مساعدة لهذا الغرض:

  1. express.json(): لتحليل الطلبات ذات الرأس Content-Type: application/json.
  2. express.urlencoded(): لتحليل الطلبات ذات الرأس Content-Type: application/x-www-form-urlencoded.

تطبيق express.json()

إذا كان تطبيقك يتلقى بيانات بتنسيق JSON (وهو الشائع في واجهات برمجة التطبيقات RESTful)، فيجب عليك استخدام express.json(). قم بإضافته كـ middleware على مستوى التطبيق (global middleware) قبل تعريف مساراتك (routes).

const express = require('express');
const app = express();
const PORT = 3000;

// استخدام middleware لتحليل جسم الطلب بتنسيق JSON
app.use(express.json());

app.post('/api/data', (req, res) => {
  // الآن، req.body سيكون متاحًا إذا كان الطلب يحتوي على JSON
  const data = req.body;
  console.log('Received data:', data);

  if (!data || Object.keys(data).length === 0) {
    return res.status(400).send('No data provided in the request body.');
  }

  res.status(200).json({ message: 'Data received successfully!', yourData: data });
});

app.listen(PORT, () => {
  console.log(`Server running on port ${PORT}`);
});

معلومة!
تأكد من أن العميل الذي يرسل الطلب يضبط رأس Content-Type إلى application/json. إذا لم يتم ضبطه بشكل صحيح، فلن يتمكن express.json() من تحليل الجسم.

تطبيق express.urlencoded()

إذا كنت تتعامل مع بيانات مرسلة من نماذج HTML التقليدية (مثل

) التي تستخدم ترميز URL (application/x-www-form-urlencoded)، فستحتاج إلى express.urlencoded().

const express = require('express');
const app = express();
const PORT = 3000;

// استخدام middleware لتحليل جسم الطلب بتنسيق URL-encoded
app.use(express.urlencoded({ extended: true }));

app.post('/submit-form', (req, res) => {
  // الآن، req.body سيكون متاحًا إذا كان الطلب يحتوي على بيانات URL-encoded
  const formData = req.body;
  console.log('Form data:', formData);

  if (!formData || Object.keys(formData).length === 0) {
    return res.status(400).send('No form data provided.');
  }

  res.status(200).send(`Thank you, ${formData.name}! Your email is ${formData.email}.`);
});

app.listen(PORT, () => {
  console.log(`Server running on port ${PORT}`);
});

معلومة!
الخيار { extended: true } يسمح بتحليل الكائنات والجداول المتداخلة (nested objects and arrays) من بيانات URL-encoded. يوصى به بشكل عام.

ترتيب الـ Middleware مهم

من الأهمية بمكان أن تقوم بتسجيل middleware تحليل جسم الطلب (مثل express.json() أو express.urlencoded()) قبل أي مسارات (routes) أو middleware آخر يحاول الوصول إلى req.body. إذا قمت بتسجيله بعد المسار، فلن يتم تنفيذه للطلبات التي تصل إلى ذلك المسار، وسيظل req.body غير معرف.

const express = require('express');
const app = express();

// صحيح: middleware قبل المسار
app.use(express.json());

app.post('/data', (req, res) => {
  console.log(req.body); // سيعمل بشكل صحيح
  res.send('OK');
});

// خطأ: middleware بعد المسار
// app.post('/another-data', (req, res) => {
//   console.log(req.body); // سيكون undefined
//   res.send('OK');
// });
// app.use(express.json()); // هذا متأخر جدًا لهذا المسار

التحقق من رأس Content-Type

لكي يعمل middleware تحليل جسم الطلب بشكل صحيح، يجب أن يرسل العميل رأس Content-Type الصحيح في طلبه. على سبيل المثال:

  1. لبيانات JSON: Content-Type: application/json
  2. لبيانات URL-encoded: Content-Type: application/x-www-form-urlencoded

إذا كان رأس Content-Type مفقودًا أو غير صحيح، فلن يتمكن middleware من تحديد كيفية تحليل جسم الطلب، وسيظل req.body غير معرف.

نصيحة!
عند اختبار واجهة برمجة التطبيقات الخاصة بك باستخدام أدوات مثل Postman أو Insomnia أو cURL، تأكد دائمًا من ضبط رأس Content-Type بشكل صحيح بالإضافة إلى إرسال جسم الطلب.

استكشاف الأخطاء وإصلاحها

إذا كنت لا تزال تواجه مشكلة، جرب الخطوات التالية:

  1. تحقق من الـ Middleware: تأكد من أنك قمت بتضمين app.use(express.json()); و/أو app.use(express.urlencoded({ extended: true })); في ملف التطبيق الرئيسي الخاص بك.
  2. تحقق من الترتيب: تأكد من أن الـ middleware هذا يقع قبل أي مسارات تحاول الوصول إلى req.body.
  3. تحقق من رأس Content-Type: استخدم أدوات المطور في المتصفح أو أدوات مثل Postman للتحقق من أن رأس Content-Type يتم إرساله بشكل صحيح من العميل.
  4. سجل req بالكامل: قبل الوصول إلى req.body، قم بتسجيل الكائن req بالكامل أو req.headers و req.method و req.url للتحقق من أن الطلب يصل كما هو متوقع.

الخلاصة

مشكلة req.body غير المعرف في Express.js هي مشكلة شائعة ولكن حلها بسيط. من خلال فهم أن Express لا يقوم بتحليل جسم الطلب افتراضيًا واستخدام الـ middleware المناسب مثل express.json() و express.urlencoded()، يمكنك الوصول بسهولة إلى البيانات المرسلة من العميل. تذكر دائمًا أهمية ترتيب الـ middleware والتحقق من رأس Content-Type لضمان سير عمل سلس لتطبيقك.

هل أحتاج إلى تثبيت حزمة body-parser بشكل منفصل؟

لا، بدءًا من Express 4.16.0، تم تضمين وظائف body-parser (مثل json() و urlencoded()) مباشرة في Express نفسه. لذلك، لا تحتاج إلى تثبيت body-parser كحزمة منفصلة بعد الآن.

ماذا لو كنت أرسل بيانات متعددة الأجزاء (multipart/form-data)؟

إذا كنت ترسل بيانات متعددة الأجزاء (عادةً لرفع الملفات)، فإن express.json() و express.urlencoded() لن تكون كافية. ستحتاج إلى استخدام middleware متخصص مثل Multer لمعالجة هذا النوع من الطلبات.

المشاركات ذات الصلة

المقال الأصلي:
حل مشكلة req.body غير المعرف في Express.js
المصدر: صِوان AI
شكر خاص لـ GEMINI و جمال الحزازي.

عن المؤلف

جمال الحزازي
مرحبا انا منشئ محتوى رقمي (صِوانˣʸᶻ) مهتم بالتصميم ui/ux، مدون في مجال التقنية و العلوم تعرف على المزيد.
اشتري لي كوب قهوة ☕

إرسال تعليق

اكتب تعليقك 🤗، لكن تيقن ان كلماتك تعبر عن من انت.
"لا يقال قف لاراك بل تكلم لأعرفك"