حل مشكلة CORS وأهمية Cross Origin Sharing

يعني إيه CORS وليه بيطلع Error في المتصفح؟​

أكيد وإنت شغال في مجال الويب، قابلت كلمة CORS أو شفت error غريب كده مكتوب فيه "CORS policy"...
وفضلت تسأل نفسك: "هو أنا عملت إيه غلط؟"
خلينا بقى نفهم القصة ببساطة كده ومن غير تعقيد.

الأول نفهم يعني إيه Origin؟​

الـ Origin ببساطة هو المكان اللي الموقع أو السيرفر بتاعك شغال عليه.
يعني بيتكون من 3 حاجات:

• الـ Protocol (زي http أو https)
• الـ Domain name (زي example.com)
• والـ Port (زي 80 أو 443)

فلو عندك مثلًا موقع شغال على
https://example.com:443
ده كده الـ Origin بتاعه بالكامل.

---

يعني إيه Same-Origin Policy؟​

المتصفحات فيها سياسة أمان اسمها Same-Origin Policy، واللي معناها ببساطة إن أي موقع مايقدرش يطلب بيانات من سيرفر تاني غير لو كان من نفس الـ Origin (يعني نفس البروتوكول + الدومين + البورت).
وده معمول كـ حماية للمستخدمين ضد أي مواقع خبيثة ممكن تحاول تسرّب بياناتهم .

بس أحيانًا، وإنت كـ Developer، بتحتاج تتعامل مع سيرفر تاني مختلف، زي مثلاً:

• الـ Frontend شغال على localhost:3000
• والـ Backend شغال على localhost:8000

ساعتها المتصفح هيقولك لأ "ده Origin تاني، ممنوع!".
وهنا بقى بييجي دور الـ CORS.

---

طيب يعني إيه CORS؟​

الـ CORS هو اختصار لـ Cross-Origin Resource Sharing، وده نظام بيسمح للمواقع إنها تبادل بيانات مع سيرفرات مختلفة عن الـ Origin بتاعها، بس بشكل آمن.
يعني ببساطة: الـ CORS هو اللي بيخلّي موقعك يقدر يبعت API requests لـ Backend مختلف.

---

الـ CORS بيشتغل إزاي؟​

لما موقعك يطلب بيانات من سيرفر تاني، السيرفر بيرد عليه ويقول له إذا كان الطلب ده مسموح ولا لأ.
وده بيتم من خلال HTTP Headers معينة بيرجعها السيرفر في الـ Response.

من أهم الـ Headers دي

Access-Control-Allow-Origin​

ده بيحدد الـ origins اللي مسموح ليها تبعت طلبات.
مثلاً:

Access-Control-Allow-Origin: https://example.com

ده معناه إن السيرفر ده بيسمح بس للموقع example.com إنه يطلب منه بيانات.

لو السيرفر حاطط:

Access-Control-Allow-Origin: *

يبقى كده مفتوح لأي موقع (وده مش آمن في أغلب الحالات).

---

Access-Control-Allow-Methods​

بيحدد أنواع الطلبات اللي مسموح ليك تبعتها، زي:

Access-Control-Allow-Methods: GET, POST, PUT, DELETE

---

Access-Control-Allow-Headers​

بيحدد إيه الـ Headers اللي تقدر تبعتها في الـ Request، زي:

Access-Control-Allow-Headers: Content-Type, Authorization

---

Access-Control-Allow-Credentials​

لو الطلب فيه Cookies أو Tokens لازم السيرفر يسمح بده كده:

Access-Control-Allow-Credentials: true

---

طب ليه بيحصل CORS Error؟​

أكتر سبب بيخلي الناس تتلغبط هو إن السيرفر مش مظبط إعدادات الـ CORS صح.
فالمتصفح لما يلاقي إن السيرفر مش مرجع الـ headers المطلوبة، بيمنع الطلب ويرجعلك الرسالة الشهيرة:

“Access to fetch at ‘XYZ’ has been blocked by CORS policy.”

---

الحل إيه بقى؟​

الحل بسيط:

1. لو عندك تحكم في الـ backend، ظبط إعدادات الـ headers كويس.
   مثال بلغة Node.js + Express
   

   app.use((req, res, next) => { res.header("Access-Control-Allow-Origin", "https://example.com");
     res.header("Access-Control-Allow-Methods", "GET, POST, PUT, DELETE");
     res.header("Access-Control-Allow-Headers", "Content-Type, Authorization");
     next();
   });

2. ولو بتستخدم Nginx:
   

   add_header 'Access-Control-Allow-Origin' 'https://example.com';
   add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';

3. ولو السيرفر مش عندك، كلم الفريق اللي مسئول عنه يفعّل الـ CORS من ناحيتهم.

---

خلاصة الكلام​

الـ CORS مش Error، ده نظام أمان بيحمي المستخدمين من هجمات الويب.
بس لو فاهمه صح، تقدر تظبطه وتخلي موقعك يشتغل مع أي API أو Backend بأمان

باختصار:

• الـ Same-Origin Policy بتحمي.
• والـ CORS بيتيح تبادل البيانات بأمان.
• الحل دايمًا في إعدادات السيرفر.

---

مثال عملي سريع:​

لو عندك Frontend React app على: http://localhost:3000
و Backend Node.js على: http://localhost:8000

يبقى لازم السيرفر يضيف Header بالشكل ده:

Access-Control-Allow-Origin: http://localhost:3000

ولو مش حاططها، هتشوف رسالة CORS Error طول اليوم

---

روابط مفيدة​

لو حابب تفهم أكتر عن الـ Same-Origin Policy:
وثائق Mozilla الرسمية عن CORS
===================================