الـ CORS - من المصطلحات المهمة في مجال الويب
خلال رحلتك في مجال الويب أكيد مر عليك مصطلح الـ CORS، أو واجهتك مشكلة بسبب موضوع الـ CORS. خلينا ندردش شوية...
ببساطة الـ CORS اختصار لـ Cross-Origin Resource Sharing
📌 في الأول كده خلينا نعرف يعني إيه Origin؟
الـ "Origin" هو الدومين (domain) أو النطاق اللي الموقع أو السيرفر بتاعك شغال عليه. بيبقى عبارة عن الـ "Protocol" (زي HTTP أو HTTPS) + اسم الدومين (زي example.com) + البورت (لو مختلف عن الـ 80 لـ HTTP أو 443 لـ HTTPS).
⚡️ طيب المشكلة فين؟
لو أنت شغال على موقع معين وعاوز الموقع بتاعك يطلب بيانات أو resources (زي JSON أو ملفات) من سيرفر تاني، السيرفر التاني ده لازم يبقى من نفس الـ origin بتاعك، يعني نفس الدومين، نفس البروتوكول، ونفس البورت.
ودي حاجة اسمها Same-Origin Policy، السياسة دي معمولة أساسًا علشان تحمي المستخدمين من أي طلبات ضارة ممكن تجي من مواقع تانية مش موثوقة.
بس في بعض الحالات، أنت كـ Developer بتبقى محتاج تعمل طلبات للسيرفرات اللي مش من نفس الـ origin بتاعك، زي لما يكون عندك Frontend شغال على دومين معين وAPI أو Backend شغالين على دومين أو بورت مختلف.
هنا بقى ييجي دور الـ CORS 👇
الـ Cross-Origin Resource Sharing (CORS) هو الحل اللي بيسمح للمواقع إنهم يطلبوا بيانات أو ملفات من سيرفرات تانية بمختلف الـ origins بشكل آمن ومأمن، بمعنى إنك تقدر تتخطى الـ Same-Origin Policy وتعمل طلبات لسيرفرات تانية طالما السيرفر ده بيقبل إنه يتعامل مع الموقع بتاعك.
📌 طيب إزاي الـ CORS بيشتغل؟
لما موقعك بيطلب بيانات من سيرفر تاني مختلف عن الـ origin بتاعه، السيرفر اللي عليه الـ resource اللي أنت بتطلبها هو اللي بيقرر إذا كان الطلب ده مسموح أو لا.
السيرفر بيرد على الطلب من خلال الـ (headers) اللي بيرجعها مع الـ response.
واحد من أهم الـ headers دي هو:
Access-Control-Allow-Origin
اللي بيحدد الـ origins اللي مسموح ليها تطلب بيانات من السيرفر ده. لو الـ origin بتاع موقعك موجود في القيمة بتاعت الـ header ده، السيرفر هيسمح بتنفيذ الطلب وهيرجعلك الـ response. ولو لل، الطلب هيتمنع وهيجيلك error من نوع CORS في المتصفح.
📍 كمان فيه Headers تانية زي:
الـ Access-Control-Allow-Methods: اللي بتحدد أنواع الطلبات اللي مسموح ليك تعملها (GET, POST, PUT, DELETE...).
الـ Access-Control-Allow-Headers: اللي بتحدد الـ headers اللي مسموح ليك تبعتها في الطلبات.
الـ Access-Control-Allow-Credentials: لو الطلب محتاج يبعت Cookies أو بيانات معينة، لازم الـ header ده يبقى موجود ومظبوط على true.
طب إيه هي المشاكل اللي ممكن تواجهنا مع CORS؟ 🤔
أحيانًا الـ CORS بيبقى مزعج، وبتظهر لك أخطاء في المتصفح من نوع "CORS error" لما السيرفر مش بيدعم الطلبات من الـ origin بتاعك.
الحل هنا بيبقى إنك تتأكد إن السيرفر اللي أنت بتطلب منه مظبط إعدادات الـ CORS صح.
بالتوفيق يا بطل ⚡️