خطأ CORS في React وNode.js: دليل الإصلاح الكامل مع أمثلة التعليمات البرمجية

ما هي هذه المشكلة؟

تعد أخطاء CORS، أو CrossOrigin Resource Sharing، من بين المشكلات الأكثر شيوعًا التي يواجهها المطورون عند إنشاء تطبيقات Fullstack باستخدام React على الواجهة الأمامية وNode.js على الواجهة الخلفية. تحدث هذه الأخطاء عندما يحاول تطبيق ويب تقديم طلبات إلى مجال أو بروتوكول أو منفذ مختلف عن ذلك الذي يخدم الصفحة. في إعداد React + Node.js النموذجي، قد يعمل تطبيق React على المضيف المحلي:3000 بينما يعمل خادم Express الخاص بك على المضيف المحلي:5000، مما يؤدي إلى فرض قيود أمان على المتصفح.

تظهر هذه المشكلة كأخطاء مثل “تم حظر الوصول للجلب من ‘http://localhost:5000/api/data’ من الأصل ‘http://localhost:3000’ بواسطة سياسة CORS: لا يوجد رأس ‘AccessControlAllowOrigin’ موجود على المورد المطلوب.” غالبًا ما يشعر المبتدئون بالإحباط لأن الكود يعمل في Postman ولكنه يفشل في المتصفح. يعد فهم CORS أمرًا ضروريًا لأي مطور ويب حديث يعمل مع واجهات برمجة التطبيقات.

لماذا يحدث هذا؟

🎨 تم إنشاء الذكاء الاصطناعي: لماذا يحدث هذا؟

ويكمن السبب الجذري في سياسة نفس الأصل للمتصفح، وهي آلية أمان مصممة لمنع مواقع الويب الضارة من الوصول إلى البيانات الحساسة من المجالات الأخرى. عندما تقوم React باستدعاء واجهة برمجة التطبيقات (API) باستخدام الجلب أو Axios إلى خادم Node.js من أصل مختلف، يحظر المتصفح الاستجابة ما لم يسمح الخادم بذلك صراحة عبر رؤوس CORS.

لا يقوم Node.js وExpress بتمكين CORS بشكل افتراضي لأسباب أمنية. بدون رؤوس مثل AccessControlAllowOrigin، وAccessControlAllowMethods، وAccessControlAllowHeaders، يرفض المتصفح الطلب. تؤدي عوامل مثل طلبات OPTIONS للاختبار المبدئي للطرق غير البسيطة (PUT أو DELETE أو الرؤوس المخصصة) إلى تفاقم المشكلة. تُظهر البيانات المستقاة من استطلاعات المطورين أن أخطاء CORS تمثل أكثر من 25% من مشكلات تكامل واجهة برمجة التطبيقات (API) في مشاريع Fullstack.

الحل خطوة بخطوة

اتبع هذه الخطوات لحل أخطاء CORS في تطبيق React وNode.js.

1. قم بتثبيت البرنامج الوسيط cors في مشروع Node.js الخاص بك: npm install cors
2. قم باستيراده واستخدامه في ملف خادم Express الخاص بك.
3. قم بتكوين الأصول المسموح بها خصيصًا لأمن الإنتاج.
4. قم بتحديث مكالمات جلب React الخاصة بك إذا لزم الأمر للحصول على بيانات الاعتماد.

هنا هو التنفيذ الكامل على جانب الخادم:

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

const corsOptions = {
  origin: 'http://localhost:3000',
  methods: ['GET', 'POST', 'PUT', 'DELETE'],
  allowedHeaders: ['ContentType', 'Authorization'],
  credentials: true
};

app.use(cors(corsOptions));
app.use(express.json());

app.get('/api/data', (req, res) => {
  res.json({ message: 'CORS fixed successfully!' });
});

app.listen(5000, () => console.log('Server running on port 5000'));

من ناحية React، استخدم الجلب باستخدام بيانات الاعتماد في حالة استخدام ملفات تعريف الارتباط أو المصادقة:

fetch('http://localhost:5000/api/data', {
  method: 'GET',
  credentials: 'include',
  headers: {
    'ContentType': 'application/json'
  }
})
.then(res => res.json())
.then(data => console.log(data));

يضمن هذا الإعداد أن الخادم يستجيب برؤوس CORS المناسبة، مما يسمح للمتصفح بقبول الاستجابة.

الحلول البديلة

🎨 إنشاء الذكاء الاصطناعي: حلول بديلة

وبعيدًا عن حزمة كورس، فكر في هذه الأساليب الثلاثة. أولاً، قم بتعيين الرؤوس يدويًا في Express بدون برامج وسيطة للتطبيقات خفيفة الوزن:

app.use((req, res, next) => {
  res.header('AccessControlAllowOrigin', 'http://localhost:3000');
  res.header('AccessControlAllowHeaders', 'Origin, XRequestedWith, ContentType, Accept');
  next();
});

ثانيًا، استخدم وكيلًا في حزمة React’s package.json أثناء التطوير: \”proxy\”: \”http://localhost:5000\”. يؤدي هذا إلى تجنب CORS بالكامل في وضع التطوير عن طريق توجيه الطلبات عبر نفس المصدر.

ثالثًا، بالنسبة للإنتاج، قم بتنفيذ التكوين المستند إلى البيئة باستخدام dotenv للتبديل بين المضيف المحلي والمجال المنشور، مما يضمن المرونة عبر البيئات.

أخطاء شائعة يجب تجنبها

غالبًا ما يقوم المطورون بتعيين الأصل على “*” والذي يعمل للاختبار ولكنه يخلق ثغرات أمنية في الإنتاج. قم دائمًا بإدراج نطاقات محددة في القائمة البيضاء. هناك خطأ آخر وهو نسيان التعامل مع طلبات OPTIONS للاختبار المبدئي، مما يؤدي إلى حظر الطلبات المعقدة. تجنب وضع تكوين CORS بعد تعريفات المسار في Express، حيث إن ترتيب البرامج الوسيطة مهم. وأخيرًا، لا تتجاهل معالجة بيانات الاعتماد عند استخدام رموز المصادقة المميزة أو الجلسات.

مثال للعالم الحقيقي

🎨 تم إنشاء الذكاء الاصطناعي: مثال للعالم الحقيقي

خذ بعين الاعتبار تطبيق إدارة المهام حيث تقوم React بجلب المهام من واجهة برمجة تطبيقات Node.js. بعد تنفيذ البرنامج الوسيط لـ cors بأصول وبيانات اعتماد محددة، يقوم التطبيق بتحميل البيانات بنجاح دون أخطاء. يمكن للمستخدمين إنشاء المهام وتحديثها وحذفها بسهولة. تُظهر المراقبة باستخدام أدوات مثل أدوات تطوير المتصفح رأس AccessControlAllowOrigin الموجود في الردود، مما يؤكد الإصلاح. يتوسع هذا النمط ليشمل التطبيقات الأكبر حجمًا التي تتعامل مع آلاف الطلبات اليومية.

الأسئلة الشائعة

س: لماذا يعمل CORS في Postman وليس في React؟

ج: لا يفرض Postman سياسات نفس الأصل للمتصفح، لذا فهو يتجاوز عمليات فحص CORS بالكامل.

س: هل يمكنني إصلاح CORS من جانب العميل فقط؟

ج: لا، يجب تكوين CORS على الخادم لإرسال الرؤوس المناسبة؛ تغييرات العميل وحدها غير كافية.

س: كيف يمكنني التعامل مع أصول متعددة في الإنتاج؟

ج: استخدم مصفوفة في corsOptions.origin أو دالة للتحقق ديناميكيًا من النطاقات المسموح بها من قاعدة بيانات أو تكوين.

س: ماذا لو كنت أستخدم Axios بدلاً من الجلب؟

ج: تحترم Axios نفس قواعد CORS؛ تأكد من تعيين رؤوس الخادم بشكل صحيح وتضمينها مع بيانات الاعتماد: صحيح للمصادقة.

س: هل هناك تأثير على الأداء من تمكين CORS؟

ج: يحدث الحد الأدنى من التأثير، بشكل رئيسي من طلبات الاختبار المبدئي، والتي يمكن تخفيفها باستخدام رؤوس التخزين المؤقت المناسبة.

الخلاصة

🎨 تم إنشاء الذكاء الاصطناعي: الخلاصة

يتطلب إصلاح أخطاء CORS في React وNode.js فهم أمان المتصفح والتكوين الصحيح للخادم. باستخدام البرامج الوسيطة ذات الإعدادات المستهدفة، يمكن للمطورين إنشاء تطبيقات Fullstack آمنة وعملية. تذكر تطبيق التكوينات الخاصة بالبيئة وتجنب المخاطر الشائعة للتطبيقات القوية. يوفر هذا الدليل كل ما يلزم لحل المشكلات بسرعة وثقة.