كيفية حل مشكلة CORS
مشكلة CORS (Cross-Origin Resource Sharing) تحدث عندما تحاول صفحة ويب الوصول إلى موارد من دومين مختلف عن الدومين الذي تم تحميل الصفحة منه، وهذا يسبب عادة حظر الوصول من المتصفح لأسباب أمان، حيث يمنع سياسة Same-Origin Policy هذه العمليات بشكل افتراضي. لحل هذه المشكلة، تحتاج إلى تمكين إعدادات CORS على الخادم الذي يستضيف الموارد المطلوبة، أو استخدام حلول بديلة تعتمد على البروكسي أو إعدادات أخرى.
ما هي مشكلة CORS وما سببها؟
مشكلة CORS هي أمان متصفح يتم فرضه لمنع المواقع من تنفيذ طلبات غير مصرح بها إلى مصادر خارجية. على سبيل المثال، إذا قمت ببناء تطبيق ويب على domain1.com وحاولت أن تطلب بيانات من api.domain2.com، سيقوم المتصفح بالتحقق من أن الخادم api.domain2.com يسمح بالوصول عبر CORS أم لا. إن لم يمنح الخادم صلاحية إرسال رؤوس Access-Control-Allow-Origin المناسبة، سيمنع المتصفح الطلب ويعطي خطأ CORS.
كيفية حل مشكلة CORS بخطوات بسيطة
1. إعداد الرؤوس (Headers) على الخادم:
أكثر الطرق فعالية لحل المشكلة هي تكوين الخادم ليرسل رأس HTTP يسمى Access-Control-Allow-Origin، والذي يسمح بالوصول من دومينات معينة أو من جميع الدومينات (*). على سبيل المثال، إذا كنت تستخدم خادم Node.js مع Express، يمكنك استخدام Middleware لإضافة هذا الرأس إلى كل الاستجابات:
app.use((req, res, next) => {
res.header('Access-Control-Allow-Origin', '*');
res.header('Access-Control-Allow-Methods', 'GET,POST,PUT,DELETE,OPTIONS');
res.header('Access-Control-Allow-Headers', 'Content-Type,Authorization');
next();
});
في خوادم أخرى مثل Apache أو Nginx، يمكن تعديل إعدادات السيرفر بإضافة التوجيه المناسب للرؤوس.
2. الإجابة على طلبات OPTIONS (Preflight):
المتصفحات تنفذ غالبًا طلبات (Preflight) من نوع OPTIONS للتحقق من الأذونات قبل إرسال الطلب الأساسي. يجب أن يرد الخادم على هذه الطلبات بشكل صحيح، ويشمل إرسال رؤوس CORS المناسبة للسماح بالطلبات المستقبلية.
3. استخدام بروكسي (Proxy):
إذا لم تتمكن من تعديل إعدادات الخادم الذي تقدم منه البيانات، يمكنك تمرير الطلبات عبر سيرفرك الخاص (Proxy) بحيث يرسل السيرفر الخاص الطلب ويعيد البيانات إلى العميل. بهذه الطريقة، يتم التعامل مع الطلبات كأنها من نفس الدومين، مما يتجنب مشكلة CORS.
4. التأكد من إعدادات المتصفح وإجراءات التطوير:
أحيانًا أثناء التطوير، قد تحتاج لتعديل إعدادات المتصفح أو استخدام إضافات مؤقتة تسمح بتجاوز قيود CORS، ولكن هذا غير مستحب في بيئة الإنتاج لأنه يهدد الأمان.
نصائح مهمة عند التعامل مع CORS
لتوفير أمان عالي لتطبيقك، ينصح بعدم استخدام * السماحية عشوائيًا، بل تحديد الدومينات المسموح لها بالوصول بدقة. كذلك، تحقق من السماح فقط للطرق (Methods) والرؤوس الضرورية للاستخدام في تطبيقك.
الحلول المثالية تعتمد على مساعدة الخادم المستضيف لمواردك لكي يسمح بشكل صريح للأصل (Origin) الذي تريد الوصول منه.
