فهم CORS وحل مشاكل API بسهولة

أخيرًا فهمت يعني إيه CORS!
أكيد مرة قابلت الرسالة دي وانت شغال على API أو مشروع ويب:
"CORS error"
الموضوع ده ممكن يكون محبط جدًا لو مش فاهم هو بيعمل كده ليه!

البوست ده هيفهمك كل حاجة عن CORS، إزاي بيشتغل، مين اللي بينفذه، وليه موجود أساسًا، وكل التفاصيل اللي محتاج تعرفها علشان متعصبش تاني .

تخيل السيناريو ده ​

أنت داخل على موقع البنك بتاعك bank.com، عملت Login، والمتصفح حفظلك Session Cookie.

الكوكي ده زي بطاقة تعريف بتاعتك، أي طلب بعد كده من جهازك للبنك هيعرف إنك إنت صاحب الحساب .

بعد شوية فتحت الإيميل ولقيت رسالة غريبة فيها لينك… فضولك خلاك تدوس عليه، واللينك ودّاك على attack.com.

الموقع ده في الخلفية حاول يبعت طلب لـ bank.com عشان يجيب بياناتك البنكية. الكارثة؟ البنك ممكن يدي البيانات عادي لأنه شايف الكوكيز بتقول إنه إنت داخل .

هنا ظهر SOP (Same-Origin Policy) .

---

إيه هو Same-Origin Policy (SOP)؟ ​

SOP معناها ببساطة:
أي طلب من موقع لموقع تاني مختلف في البروتوكول، الدومين، أو البورت، هيترفض تلقائيًا.

ده قانون من المتصفحات لحمايتك من هجمات زي CSRF.
لكن المشكلة؟ لو انت Developer، محتاج تجيب بيانات من مواقع تانية أو APIs عامة، SOP هنا هيقفلك الباب خالص .

---

وهنا ظهر موضوع CORS ​

CORS اختصار Cross-Origin Resource Sharing.
لو example.com حاول يجيب بيانات من bank.com، المتصفح بيبعت Header اسمه Origin بيقول:

"الطلب ده جاي منين؟"
لو البنك شايف إن example.com موثوق أو البيانات عامة، بيرد بـ Header:

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

أو يحط * لو عايز يفتح لكل المواقع.

المتصفح بعد كده بيقرر:

• لو الرد مناسب → يكمل الطلب
• لو مش مناسب → يوقف الطلب ويطلعلك CORS Error

---

إيه حكاية Preflight Request؟ ​

في طلبات معينة زي PUT, DELETE أو لو فيها Headers خاصة، المتصفح مش هيبعتها على طول.
بيعمل حاجة اسمها Preflight Request:

• Request من نوع OPTIONS بيسأل السيرفر:

"هو مسموح أعمل الطلب ده؟"​

• السيرفر لو وافق بيرجع Headers زي:

Access-Control-Allow-Methods: PUT, GET, POST, DELETE
Access-Control-Allow-Headers: Content-Type, Authorization

• لو كل حاجة تمام → المتصفح يبعت الطلب الأصلي.
• لو لا → المتصفح يوقف الطلب ويطلع CORS Error .

---

CORS مش أداة سيرفر! ​

الفرق المهم:

• CORS Policy من المتصفح، هدفه حماية المستخدم من المواقع اللي بتحاول تسرق بياناته.
• السيرفر محتاج يتجهز عشان يتعامل مع CORS، سواء بـ Headers أو إعدادات السيرفر.

---

مثال عملي لتفعيل CORS على السيرفر ​

لو عندك Node.js + Express، ممكن تستخدم مكتبة جاهزة:

const express = require('express');
const cors = require('cors');

const app = express();

// السماح لموقع معين
app.use(cors({
  origin: 'http://example.com'
}));

app.get('/data', (req, res) => {
  res.json({ message: "ده مثال لبيانات CORS" });
});

app.listen(3000, () => console.log('Server running على 3000'));

لو حابب تفتح لكل المواقع:

app.use(cors({ origin: '*' }));

---

ليه لازم نفهم CORS؟ ​

• حماية البيانات: يمنع المواقع الغريبة من الوصول للكوكيز والبيانات الحساسة.
• سهولة التعامل مع APIs: لو متفهمش CORS، ممكن تقفلك كتير من المشاريع.
• Preflight Request مهم لطلبات حساسة زي PUT و DELETE.

---

نصائح لتجنب مشاكل CORS ​

1. دايمًا حدد Origin بدل * لو ممكن، لتقليل المخاطر.
2. استخدم مكتبات جاهزة لتفعيل CORS على السيرفر.
3. افهم طلبات Preflight ومتى بتظهر.
4. خليك حريص وأنت شغال على بيانات حساسة.

---

الخلاصة ​

• CORS موجود لحمايتك من المواقع اللي بتحاول تسرق البيانات.
• هو Policy من المتصفح مش السيرفر.
• Preflight Requests تحميك في الطلبات الحساسة.
• السيرفر محتاج يتجهز بـ Headers صح عشان الطلبات تمشي.
• دايمًا افهم الفرق بين SOP وCORS وانت بتشتغل على APIs .

إيه أكتر موقف CORS عطلك وانت شغال على Web Projects؟ شاركني تجربتك تحت