ما هو CORS وكيف يؤثر في طلبات المتصفح

Facebook X

يظهر خطأ CORS عندما تحاول صفحة ويب قراءة استجابة من خادم على نطاق أو منفذ مختلف، ولا يمنح ذلك الخادم الإذن المناسب. أما الاسم، فهو اختصار لعبارة «مشاركة الموارد عبر المصادر المختلفة» Cross-Origin Resource Sharing.

ما هو CORS

يعتمد CORS على رؤوس استجابة HTTP يرسلها الخادم حتى يعرف المتصفح هل يسمح للصفحة بالوصول إلى محتوى الاستجابة. ويختلف «المصدر» Origin عندما يختلف البروتوكول أو اسم النطاق أو رقم المنفذ؛ ولهذا يُعد الطلب من localhost:3000 إلى localhost:8080 طلبًا عابرًا للمصدر.

مثال على خطأ CORS

لنفترض أن واجهة المستخدم تعمل على http://localhost:3000، بينما واجهة API على http://localhost:8080. فعلى سبيل المثال، عند استخدام fetch لطلب بيانات، قد يصل الطلب إلى الخادم لكن المتصفح يمنع JavaScript من قراءة الرد إذا غاب رأس السماح.

fetch('http://localhost:8080/api/products')
  .then(response => {
    if (!response.ok) throw new Error('فشل الطلب');
    return response.json();
  })
  .then(products => console.log(products))
  .catch(error => console.error(error));

كيف يسمح الخادم بطلب معروف

إذا كنت تدير الخادم، أرسل رأس Access-Control-Allow-Origin بقيمة مصدر الواجهة المسموح له. وفيما يلي مثال يوضح الرأس المطلوب في استجابة API؛ لا تضعه داخل fetch الخاص بالمتصفح.

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

أما في بيئة الإنتاج، فضع نطاق موقعك الحقيقي بدل localhost. كذلك، لا تستخدم القيمة * للطلبات التي تتضمن بيانات اعتماد مثل ملفات تعريف الارتباط؛ لها قواعد أكثر تقييدًا، ويجب تحديد المصدر المسموح به صراحة عند تفعيل إرسال الاعتمادات.

ما هو طلب الفحص المسبق Preflight

على سبيل المثال، بعض الطلبات، مثل طلبات PUT أو تلك التي تضيف رؤوسًا مخصصة، يسبقها طلب OPTIONS للتأكد من أن الخادم يسمح بالطريقة والرؤوس المراد استخدامها. ولذلك، يجب أن يرد الخادم على الفحص المسبق بالرؤوس المناسبة قبل تنفيذ الطلب الأصلي.

هل CORS وسيلة لحماية API

ورغم أهميته، فإن CORS قيد يطبقه المتصفح على قراءة الاستجابات عبر المصادر، وليس بديلًا عن المصادقة وتحديد الصلاحيات؛ إذ يمكن للعملاء غير المتصفحات إرسال طلبات HTTP مباشرة. لذلك، لا تعالج الخطأ بتعطيل أمان المتصفح. ويمكن الاستفادة من شرح السيرفر المحلي Localhost لفهم اختلاف المنافذ أثناء التطوير.