حل مشكلة CORS في الويب وفهم Access-Control بسهولة

لو انت Web Developer أكيد قابلت الخطأ ده قبل كده

Access to fetch at 'http://localhost:3000/category' from origin 'http://127.0.0.1:5500' has been blocked by CORS policy

الرسالة دي معناها إنك بتحاول تبعت طلب لسيرفر من موقعك، لكن السيرفر مش مديك إذن.
والمتصفح عشان يحميك، بيمنع الطلب وبيقولك:
السيرفر مش سامح للموقع بتاعك يتعامل معاه

ما هو الـ CORS؟​

الـ CORS (Cross-Origin Resource Sharing) هو نظام حماية في المتصفحات يمنع المواقع من إنها تبعت طلبات لسيرفرات بدومين مختلف إلا بإذن صريح.

مثال بسيط:
لو موقعك شغال على youtube.com وبيحاول يجيب بيانات من api.youtube.com، المتصفح مش هيسمح غير لو السيرفر قال:
"أيوة، الموقع ده مسموح له ياخد بيانات مني."

ليه؟ لأن بدون القاعدة دي، أي موقع ضار ممكن يبعت طلبات لسيرفرات تانية وياخد بيانات المستخدمين!
عشان كده، الـ CORS يعتبر الحارس الأمين بين الموقع والسيرفرات .

---

إزاي السيرفر بيتعامل مع الـ CORS؟​

علشان السيرفر يسمح بالمواقع اللي تقدر تتعامل معاه، بيستخدم مجموعة إعدادات زي:

Access-Control-Allow-Origin​

تحدد الدومين اللي مسموح له يوصل للـ API.

Access-Control-Allow-Methods​

تحدد أنواع الطلبات المسموح بها زي (GET, POST, PUT...).

Access-Control-Allow-Headers​

تحدد الهيدرز اللي ممكن يرسلها الموقع.

Access-Control-Allow-Private-Network​

لو الـ Backend شغال على سيرفر والـ Frontend لسه Local، لازم نخليها `[true]` عشان نسمح له يتصل بالـ API أثناء التطوير.

استخدام الـ Whitelisting​

واحدة من أفضل طرق الأمان هي الـ Whitelisting
بتعمل Array فيها الدومينات المسموح لها فقط إنها تتعامل مع الـ API.

مثلاً:

const whitelist = ['http://localhost:3000', 'https://myapp.com'];

لو الدومين اللي بيطلب موجود في الـ whitelist، نفتحله الإذن بـ
Access-Control-Allow-Origin: *
وبكده نضمن إن الطلبات كلها جاية من مصادر موثوقة

الخلاصة​

الـ CORS مش مجرد Error مزعج!
هو نظام حماية مهم جدًا بيمنع المواقع من الوصول لموارد مش مسموح لها.
وكل المطلوب إنك تظبط إعدادات السيرفر بشكل صحيح عشان كل حاجة تشتغل بسلاسة