لماذا لا يزال localhost يتسبب في أخطاء CORS
تقوم بتشغيل الواجهة الأمامية (frontend) على localhost:3000. تقوم بتشغيل الواجهة الخلفية (backend) على localhost:5000. كلا التطبيقين يعملان على جهازك المحمول. ومع ذلك، تظهر لك رسالة خطأ CORS.
يحدث هذا بسبب الطريقة التي تُعرف بها المتصفحات "الأصل" (origin).
يتكون الأصل من ثلاثة أجزاء:
- البروتوكول (Protocol)
- النطاق (Domain)
- المنفذ (Port)
قارن بين هذين الرابطين:
كلاهما يشتركان في نفس البروتوكول. كلاهما يشتركان في نفس النطاق. لكنهما يستخدمان منافذ مختلفة.
ترى المتصفحات المنافذ المختلفة كأصول مختلفة.
عندما يقوم تطبيق React الخاص بك باستدعاء الـ API، يرى المتصفح طلباً عابراً للأصول (cross-origin request). فهو يعتبرهما كيانين منفصلين.
لماذا توجد هذه القاعدة؟ للأمان.
إذا كان بإمكان المواقع استدعاء أي API بحرية، فقد يتمكن موقع ضار من:
- قراءة بياناتك البنكية.
- الوصول إلى واجهات برمجة تطبيقات (APIs) خاصة.
- التصرف نيابة عنك.
تستخدم المتصفحات "سياسة الأصل الواحد" (Same-Origin Policy) لمنع ذلك. لا يمكن للموقع A الوصول إلى الموقع B ما لم يوافق الموقع B على ذلك.
يرمز CORS إلى "مشاركة الموارد عبر الأصول" (Cross-Origin Resource Sharing). وهي وسيلة تتيح لخادمك إخبار المتصفح: "أنا أثق بالطلبات القادمة من هذا الأصل تحديداً."
يمكنك إصلاح ذلك عن طريق إضافة ترويسة (header) إلى الواجهة الخلفية الخاصة بك: Access-Control-Allow-Origin: http://localhost:3000
هذا يخبر المتصفح أن الطلب آمن.
نقطة ارتباك شائعة: ترى الطلب يصل إلى سجلات (logs) الواجهة الخلفية، ولكن الواجهة الأمامية تفشل.
يحدث هذا لأن:
- الواجهة الأمامية ترسل الطلب.
- الواجهة الخلفية تستقبل الطلب بنجاح.
- الواجهة الخلفية ترسل الاستجابة بنجاح.
- المتصفح يستلم الاستجابة ويحظرها بسبب قواعد الأمان.
هذا الخطأ هو ميزة أمان في المتصفح.
تعمل أدوات مثل Postman أو cURL لأنها ليست متصفحات. فهي لا تفرض سياسات أمان المتصفح.
يتجاهل المتصفح حقيقة أن كلا التطبيقين يعملان على جهازك. فهو يهتم فقط بالأصل (origin).