إعداد CORS (مشاركة الموارد عبر المواقع) للموقع

ما هو CORS؟

مشاركة الموارد عبر المواقع (CORS) هي آلية تعتمد على رؤوس HTTP لتخفيف القيود التي يفرضها المتصفح على الطلبات عبر المواقع. باختصار، عندما ترغب صفحة ويب (مثل صفحة موجودة على example.com) في طلب موارد من نطاق مختلف (مثل api.example.net)، يقوم المتصفح تلقائيًا بحظر هذا الطلب، وهذه هي سياسة نفس الأصل للمتصفح. يسمح CORS للخادم بإضافة رؤوس محددة في الاستجابة، ليخبر المتصفح بأي مصادر يُسمح لها بالوصول إلى الموارد، وبالتالي تحقيق الوصول عبر المواقع بشكل آمن.

لماذا نستخدم CORS؟

عندما يحتاج تطبيقك على الواجهة الأمامية (مثل SPA تعمل على app.example.com) إلى استرداد البيانات من واجهة برمجة التطبيقات على الخلفية (الموجودة على api.example.com)، من المحتمل أنك ستحتاج إلى استخدام CORS.

شرح معلمات CORS

فيما يلي بعض المعلمات الشائعة في CORS وأغراضها:

1. Access-Control-Allow-Origin:

   • الهدف: تحديد المصدر المسموح له بالوصول إلى الموارد.
   • القيم الممكنة:
     • *: يسمح بالطلبات من أي نطاق (غير موصى به للاستخدام في بيئة الإنتاج، لأنه غير آمن).
     • https://example.com: يسمح فقط بالطلبات من https://example.com.
     • https://example.com https://www.example.net: يسمح فقط بالطلبات من https://example.com و https://www.example.net.
   • تنبيه هام: عندما يحتوي الطلب على رأس Authorization، لا يمكن تعيين Access-Control-Allow-Origin إلى *، بل يجب تعيينه إلى نطاق محدد، وإلا فسيتم فشل الطلب عبر المواقع.

2. Access-Control-Allow-Methods:

   • الهدف: تحديد طرق HTTP المسموح بها (مثل GET، POST، PUT، DELETE).
   • القيم الممكنة: على سبيل المثال: GET, POST, PUT, DELETE, OPTIONS
   • تنبيه هام: إذا كانت طلبك تحتوي على رؤوس مخصصة، أو استخدمت طرق PUT أو DELETE، يجب عليك هنا الإعلان عن طريقة OPTIONS، وإلا، سيقوم المتصفح أولاً بإرسال طلب فحص OPTIONS، وإذا لم يتم ذكر إمكانية استخدام طريقة OPTIONS في استجابة الفحص، فسيفشل طلبك.

3. Access-Control-Allow-Headers:

   • الهدف: تحديد رؤوس HTTP المخصصة التي يُسمح للعميل باستخدامها في الطلب.
   • القيم الممكنة: على سبيل المثال: Content-Type, Authorization
   • تنبيه هام: إذا احتوى طلبك على رؤوس مخصصة، يجب عليك هنا الإعلان عن السماح باستخدامها، وإلا، سوف يمنع المتصفح طلبك.

4. Access-Control-Allow-Credentials:

   • الهدف: تحديد ما إذا كان يُسمح للطلبات عبر المواقع بإرفاق ملفات تعريف الارتباط أو معلومات المصادقة على HTTP.
   • القيم الممكنة: true أو false.
   • تنبيه هام: عند تعيينها إلى true، لا يمكن أن تكون قيمة Access-Control-Allow-Origin عبارة عن حرف بدل *.

تمكين وتكوين CORS في ServBay

تمتلك ServBay واجهة مريحة لتكوين إعدادات CORS للموقع، والخطوات المحددة كالتالي:

1. اختيار الموقع: في قائمة التنقل على الجانب الأيسر من واجهة ServBay الرئيسية، اختر خيار "الموقع". من قائمة المواقع، اختر الموقع الذي تريد تكوين CORS له.
2. الدخول إلى إعدادات CORS: في واجهة تكوين الموقع، ابحث عن قسم "CORS". يقوم ServBay افتراضيًا بإيقاف CORS، تحتاج إلى تمكين CORS يدويًا عن طريق تحويل مفتاح التبديل من "مغلق" إلى "مفتوح".
3. تكوين Access-Control-Allow-Origin: في مربع إدخال Access-Control-Allow-Origin، أدخل أسماء النطاقات المسموح لها بالوصول، يمكن فصل النطاقات المتعددة بمسافة. على سبيل المثال: https://servbay.new https://www.servbay.com https://www.servbay.dev https://www.servbay.cn https://appleid.apple.com.
4. تكوين Access-Control-Allow-Methods: في مربع إدخال Access-Control-Allow-Methods، أدخل طرق HTTP التي ترغب في السماح بها. على سبيل المثال: GET, POST, PUT, DELETE, OPTIONS.
5. تكوين Access-Control-Allow-Headers: في مربع إدخال Access-Control-Allow-Headers، أدخل رؤوس الطلب التي ترغب في السماح بها. على سبيل المثال: Content-Type, Authorization.
6. تمكين Allow-Credentials (اختياري): إذا كنت بحاجة إلى السماح للطلبات عبر المواقع بإرفاق ملفات تعريف الارتباط أو معلومات المصادقة، يرجى تمكين مفتاح التبديل Allow-Credentials. يرجى ملاحظة أنه إذا تم تفعيل هذا الخيار، فلا يمكن تعيين قيمة Access-Control-Allow-Origin إلى حرف بدل *.
7. حفظ الإعدادات: بعد إتمام التكوين، انقر على زر "حفظ" في الجزء السفلي الأيمن لتطبيق التغييرات الخاصة بك.

مثال

استنادًا إلى لقطة الشاشة أعلاه، فإن إعدادات CORS المكونة للموقع "ServBay Testing" هي كالتالي:

• Access-Control-Allow-Origin: https://servbay.new https://www.servbay.com https://www.servbay.dev https://www.servbay.cn https://appleid.apple.com
• Access-Control-Allow-Methods: GET, POST, PUT, DELETE, OPTIONS
• Access-Control-Allow-Headers: Content-Type, Authorization
• Allow-Credentials: مفعل.

وهذا يعني أن الطلبات من هذه النطاقات يمكنها الوصول إلى موارد موقع servbay.new، ويمكنها استخدام طرق GET, POST, PUT, DELETE, OPTIONS، ويمكن أيضًا إرفاق رؤوس Content-Type وAuthorization ومعلومات ملفات تعريف الارتباط.

ملاحظات

• الأمان: في بيئة الإنتاج، يرجى تجنب استخدام حرف بدل * كقيمة لـ Access-Control-Allow-Origin.
• التخزين المؤقت: قد يقوم المتصفح بتخزين استجابة CORS مؤقتًا، لذا بعد تغيير إعدادات CORS، قد تحتاج إلى مسح ذاكرة التخزين المؤقت للمتصفح.
• التكوين البرمجي: في بعض الحالات، بالإضافة إلى تكوين CORS على خادم الويب، قد تحتاج أيضًا إلى تكوين CORS في الكود (Laravel).
• الأوضاع المعقدة: بالنسبة للأوضاع المعقدة عبور المواقع، قد تحتاج إلى دمج CORS مع تقنيات أخرى مثل JSONP أو الوكلاء.

من خلال الخطوات أعلاه، يمكنك بسهولة تمكين وتكوين CORS لموقعك في ServBay وضمان أن طلباتك عبر المواقع تتم بنجاح.

نأمل أن تساعدك هذه الوثيقة في فهم واستخدام ميزات CORS في ServBay بشكل أفضل. إذا كان لديك أي أسئلة، فلا تتردد في طرحها.