ما هي مشكلة CORS؟
مشكلة CORS، أو Cross-Origin Resource Sharing، هي إحدى قيود الأمان التي تفرضها المتصفحات لمنع وصول سكريبتات من مصدر (دومين) إلى موارد من مصدر مختلف دون إذن صريح. بمعنى آخر، إذا حاولت صفحة ويب تحميل بيانات أو تنفيذ طلب API من سيرفر مختلف عن السيرفر الذي استُضيفت منه الصفحة، قد تواجه مشكلة CORS تمنع الاتصال.
كيف تحل مشكلة CORS؟
لحل مشكلة CORS، يجب التأكد من أن السيرفر الذي يستضيف الموارد يسمح بالوصول من الدومين الذي تطلب منه البيانات. هذا يتم عادة من خلال إعدادات الاستجابة للطلبات (HTTP headers) على السيرفر.
1. ضبط هيدر Access-Control-Allow-Origin
الطريقة الأساسية هي إضافة هيدر Access-Control-Allow-Origin في ردود السيرفر. هذا الهيدر يحدد الدومينات المسموح لها بالوصول للموارد. يمكن أن يكون القيمة "*" للسماح لأي دومين، أو يمكن تحديد دومين بعينه مثل "https://example.com".
مثال: إذا كنت تستخدم Express.js في Node.js، يمكنك إضافة الكود التالي:
app.use((req, res, next) => {
res.header('Access-Control-Allow-Origin', '*');
next();
});
2. السماح بالطلبات المسبقة (Preflight Requests)
بعض الطلبات خصوصًا التي تستخدم طرق HTTP غير GET/POST أو التي ترسل هيدرات خاصة تحتاج إلى "Preflight Request" باستخدام طريقة OPTIONS. يجب على السيرفر الرد على هذه الطلبات بهيدر يسمح بطرق HTTP والهيدرات المسموح بها.
هيدر مهم مثل:
Access-Control-Allow-Methods: GET, POST, PUT, DELETEAccess-Control-Allow-Headers: Content-Type, Authorization
تأكد من أن السيرفر يعالج طلب OPTIONS ويرد بهيدرات CORS المناسبة.
3. استخدام بروكسي
إذا لم يكن لديك تحكم على السيرفر، يمكنك استخدام بروكسي (خادم وسيط) يقع ضمن نفس الدومين الخاص بك ليعيد إرسال الطلبات إلى السيرفر الآخر. بهذه الطريقة، يكون الطلب ضمن نفس الأصل ولا يتم حظر CORS.
4. إعدادات المتصفح والأدوات أثناء التطوير
خلال التطوير يمكنك تعطيل قيود CORS مؤقتًا في المتصفح أو استخدام إضافات تسهل تجاوز المشكلة. لكن لا يُنصح باستخدام هذه الطرق في بيئة الإنتاج لأنها تضعف الأمان.
5. خدمات الطرف الثالث والحلول الجاهزة
بعض خدمات الاستضافة أو API تقدم إعدادات تسمح بضبط CORS من خلال لوحة التحكم الخاصة بها. إذا كنت تستخدم هذه الخدمات، تحقق من توثيقها لضبط CORS بسهولة ودون الحاجة لتعديل السيرفر مباشرة.
