كيفية إصلاح خطأ CORS في ووردبريس؟ (دليل سهل)

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

يحدث هذا الخطأ عندما يحاول موقع WordPress الخاص بك الوصول إلى موارد من مصدر مختلف (نطاق أو بروتوكول أو منفذ)، ولا يسمح الخادم الذي يستضيف تلك الموارد بذلك. 

يُعد حل أخطاء CORS أمرًا بالغ الأهمية، حيث يمكن أن تعطل الوظائف الأساسية مثل استدعاءات API وتحميل الخطوط وطلبات AJAX، مما يؤثر سلبًا على أداء موقعك وتجربة المستخدم.

يقدم هذا الدليل نظرة عامة على الخطوات التي يمكنك اتخاذها لتحديد وإصلاح أخطاء CORS في WordPress، مما يضمن بقاء موقعك الإلكتروني فعالاً وسهل الاستخدام.

باختصار: حل مشكلات مشاركة الموارد عبر النطاقات (CORS)

• يظهر هذا الخطأ عندما يطلب موقعك موارد من نطاق آخر دون الحصول على تصاريح الوصول المناسبة. تقوم المتصفحات بحظر الطلب لحماية أمان المستخدم.

• يمكن أن يؤدي ذلك إلى تعطيل استدعاءات واجهة برمجة التطبيقات (API)، والخطوط، وموارد شبكة توصيل المحتوى (CDN)، وطلبات AJAX، والأدوات المضمنة، مما يؤثر على الأداء وتجربة المستخدم.

• حدد المشكلة باستخدام وحدة تحكم المتصفح وعلامة تبويب الشبكة. ابحث عن الطلبات المحظورة وعناوين Access-Control-Allow-Origin المفقودة.

• قم بإصلاح ذلك عن طريق تحديث إعدادات الخادم، وملف htaccess، ووظائف القالب، وقواعد CDN، أو عن طريق الاتصال بمزود الموارد للحصول على التكوين الصحيح.

ما هو خطأ CORS؟

تُعدّ مشاركة الموارد عبر النطاقات (CORS) ميزة أمان يتم تطبيقها بواسطة متصفحات الويب لمنع المواقع الإلكترونية الضارة من الوصول إلى المعلومات الحساسة على مواقع أخرى دون إذن.

يعمل ذلك عن طريق التحقق مما إذا كان الخادم الذي يستضيف المورد يتضمن رؤوسًا محددة تمنح الإذن لطلبات المصادر المختلفة. 

يحدث خطأ CORS عندما تحاول صفحة ويب الوصول إلى موارد من نطاق أو بروتوكول أو منفذ مختلف، لكن الخادم لا يسمح بذلك.

تشمل السيناريوهات النموذجية التي تحدث فيها أخطاء CORS في ووردبريس ما يلي:

• جلب بيانات واجهة برمجة التطبيقات الخارجية: عندما يحاول موقع WordPress الخاص بك الحصول على بيانات من واجهة برمجة تطبيقات خارجية، يمكن أن يحدث خطأ CORS إذا لم يسمح خادم واجهة برمجة التطبيقات لموقعك بالوصول إلى موارده.

• تحميل الخطوط من نطاق آخر: إذا كنت تستخدم خطوطًا مخصصة مستضافة على نطاق مختلف، فقد تواجه أخطاء CORS إذا لم يسمح خادم الخطوط لموقعك بتحميل هذه الخطوط.

• استخدام شبكة توصيل المحتوى (CDN) للأصول الثابتة: عند تقديم الصور أو ملفات CSS أو JavaScript من شبكة توصيل المحتوى (CDN)، يمكن أن تنشأ أخطاء CORS إذا توصيل المحتوى (CDN) الرؤوس الصحيحة للسماح لموقعك بالوصول إلى هذه الملفات.

• إجراء طلبات AJAX: إذا كان موقع WordPress الخاص بك يقوم بإجراء AJAX إلى نقطة نهاية REST API مخصصة على نطاق فرعي مختلف، فقد تحدث أخطاء CORS إذا لم يسمح خادم API صراحةً بهذه الطلبات.

• تضمين أدوات الطرف الثالث: أخيرًا، يمكن أن يؤدي تضمين الأدوات من نطاقات أخرى باستخدام الإطارات المضمنة إلى أخطاء CORS إذا كان خادم الأدوات لا يسمح بالوصول عبر المصادر.

كيف تؤثر أخطاء CORS على وظائف الموقع الإلكتروني وتجربة المستخدم؟

قد تؤدي أخطاء CORS إلى تعطيل وظائف أساسية في موقعك، مثل تحميل البيانات الخارجية أو الخطوط المخصصة أو البرامج النصية. ونتيجة لذلك، قد لا يعرض موقعك بشكل صحيح أو لا يعمل بكامل طاقته، مما يؤدي إلى تجربة مستخدم سيئة.

على سبيل المثال، قد تفشل الميزات التي تعتمد على واجهات برمجة التطبيقات الخارجية، وقد لا يتم تحميل الخطوط المخصصة، أو قد تتعطل العناصر التفاعلية التي تستخدم AJAX.

لذلك، فإن حل أخطاء CORS أمر ضروري لضمان تشغيل موقعك الإلكتروني بسلاسة وتوفير تجربة مستخدم سلسة.

تحديد أخطاء CORS في ووردبريس

باتباع هذه الخطوات، يمكنك بسهولة تحديد أخطاء CORS في موقع WordPress الخاص بك.

تحقق من وحدة تحكم المتصفح: المتصفح أدوات مطوري (بالضغط على F12 أو النقر بزر الماوس الأيمن على الصفحة واختيار "فحص"). انتقل إلى علامة التبويب "وحدة التحكم" للاطلاع على أي رسائل خطأ.

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

في أدوات المطور، انتقل إلى علامة التبويب "الشبكة" وأعد تحميل الصفحة.

• ابحث عن أي طلبات مميزة باللون الأحمر، مما يشير إلى فشلها.
• انقر على هذه الطلبات للاطلاع على مزيد من التفاصيل حول الخطأ، بما في ذلك المشكلات المتعلقة بـ CORS.

مراجعة رؤوس استجابة واجهة برمجة التطبيقات: عند العمل مع واجهات برمجة التطبيقات، افحص رؤوس الاستجابة في علامة التبويب "الشبكة". تحقق من وجود رأس "Access-Control-Allow-Origin" وتكوينه بشكل صحيح.

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

استخدم الأدوات عبر الإنترنت: استخدم أدوات مثل CORS Checker لاختبار ما إذا كانت الموارد الخارجية التي تحاول الوصول إليها مهيأة بشكل صحيح للسماح بطلبات المصادر المختلفة.

اقرأ عن: نصائح لإصلاح أخطاء فشل تحديث ونشر ووردبريس

أمثلة على أخطاء CORS في ووردبريس وخطوات إصلاحها

فيما يلي بعض السيناريوهات الشائعة التي تحدث فيها أخطاء CORS في ووردبريس، بالإضافة إلى خطوات بسيطة لإصلاحها.

مثال 1: جلب بيانات واجهة برمجة التطبيقات الخارجية

يحاول موقع ووردبريس الخاص بك الحصول على بيانات من واجهة برمجة تطبيقات خارجية، لكنه يفشل.

رسالة الخطأ:

الوصول إلى fetch في 'https://api.example.com/data' من المصدر 'https://yourwordpresssite.com' بواسطة سياسة CORS: لا يوجد رأس 'Access-Control-Allow-Origin' في المورد المطلوب.

طريقة الإصلاح: قم بتعديل ملف .htaccess في مجلد WordPress الرئيسي الخاص بك:

<IfModule mod_headers.c>مجموعة رأسية Access-Control-Allow-Origin "*"</IfModule>

هذا يُخبر الخادم بالسماح لأي موقع بالوصول إلى المورد.

اقرأ أيضًا: كيفية إصلاح أخطاء 301 في ووردبريس

المثال الثاني: تحميل الخطوط من نطاق آخر

يستخدم موقع ووردبريس الخاص بك خطوطًا مخصصة مستضافة على نطاق مختلف، لكنها لا يتم تحميلها.

رسالة الخطأ:

تم حظر الوصول إلى الخط الموجود على الرابط 'https://fonts.example.com/font.woff2' من المصدر 'https://yourwordpresssite.com' بواسطة سياسة CORS: لا يوجد رأس 'Access-Control-Allow-Origin' في المورد المطلوب.

طريقة الإصلاح: أضف الكود التالي إلى ملف functions.php الخاص بقالبك:

دالة إضافة رؤوس CORS: { header("Access-Control-Allow-Origin: *"); } add_action('init', 'add_cors_headers');

يساعد هذا في إضافة رؤوس CORS المطلوبة إلى جميع الاستجابات.

مثال 3: استخدام شبكة توصيل المحتوى (CDN) للأصول الثابتة

يقوم موقع WordPress الخاص بك بعرض الصور أو ملفات CSS أو JavaScript من شبكة توصيل المحتوى (CDN)، ولكن يتم حظرها.

رسالة الخطأ:

تم حظر الوصول إلى البرنامج النصي على 'https://cdn.example.com/script.js' من المصدر 'https://yourwordpresssite.com' بواسطة سياسة CORS: يحتوي رأس 'Access-Control-Allow-Origin' على قيم متعددة '*, *'، ولكن يُسمح بقيمة واحدة فقط.

طريقة الإصلاح: إذا كنت تستخدم Apache، يمكنك إضافة ما يلي إلى ملف التكوين الخاص بك:

<IfModule mod_headers.c>مجموعة رأسية Access-Control-Allow-Origin "*"</IfModule>

إذا كنت تستخدم Nginx، فأضف هذا إلى إعداداتك:

location / { add_header 'Access-Control-Allow-Origin' '*'; }

مثال 4: إجراء طلبات AJAX

يقوم موقع WordPress الخاص بك بإجراء طلبات AJAX إلى نقطة نهاية REST API مخصصة على نطاق فرعي مختلف، ولكن يتم حظرها.

رسالة الخطأ:

تم حظر الوصول إلى XMLHttpRequest على 'https://api.yourwordpresssite.com/endpoint' من المصدر 'https://yourwordpresssite.com' بواسطة سياسة CORS: لم يجتز الرد على طلب ما قبل الرحلة فحص التحكم في الوصول: لا يوجد رأس 'Access-Control-Allow-Origin' في المورد المطلوب.

طريقة الإصلاح: قم بتثبيت وتفعيل إضافة Enable CORS، ثم قم بضبط الإعدادات للسماح لنطاقك الفرعي.

مثال 5: تضمين أدوات الطرف الثالث

يقوم موقع ووردبريس الخاص بك بتضمين أدوات من نطاقات أخرى باستخدام إطارات iframe، لكنها لا يتم تحميلها.

رسالة الخطأ:

تم حظر الوصول إلى المورد الموجود على 'https://widget.example.com/' من المصدر 'https://yourwordpresssite.com' بواسطة سياسة CORS: لا يوجد رأس 'Access-Control-Allow-Origin' في المورد المطلوب.

طريقة الإصلاح: اطلب من مزود الخدمة الخارجي إضافة نطاقك إلى Access-Control-Allow-Origin . أو يمكنك تجربة إضافة ما يلي إلى ملف .htaccess:

<IfModule mod_headers.c>مجموعة رأسية Access-Control-Allow-Origin "*"</IfModule>

تعرف على: ما هي أخطاء 404؟ وكيف يمكنني إصلاحها؟

طرق أخرى لحل أخطاء CORS في ووردبريس

إليك بعض الطرق الإضافية لحل أخطاء CORS وضمان الأداء السلس لموقع WordPress الخاص بك.

• باستخدام Cloudflare: إذا كنت تستخدم Cloudflare، يمكنك ضبط قواعد مخصصة لإدارة رؤوس CORS من خلال لوحة تحكم Cloudflare. كما يمكن استخدام Cloudflare Workers لإضافة أو تعديل الرؤوس أثناء مرور الطلبات عبر شبكتها.

• تعديل ملف functions.php الخاص بالقالب: هناك طريقة أخرى وهي إضافة كود إلى ملف functions.php الخاص بالقالب. أدخل الكود التالي لتفعيل CORS:

دالة إضافة رؤوس CORS: `function add_cors_headers() { header("Access-Control-Allow-Origin: *"); header("Access-Control-Allow-Methods: GET, POST, PUT, DELETE, OPTIONS"); header("Access-Control-Allow-Headers: Content-Type, Authorization"); } add_action('init', 'add_cors_headers');`

• استخدام خادم وكيل CORS: يعمل خادم وكيل CORS كخادم وسيط يتعامل مع الطلبات بين موقعك والمورد الخارجي. ويضيف رؤوس CORS اللازمة قبل إعادة توجيه الاستجابة إلى موقعك.

• البرمجيات الوسيطة المخصصة: قم بتطبيق برمجيات وسيطة مخصصة على خادمك لإضافة رؤوس CORS اللازمة إلى الاستجابات. يمكن القيام بذلك باستخدام لغات برمجة من جانب الخادم مثل PHP أو Node.js أو Python.

• خدمات الطرف الثالث: تتضمن بعض خدمات الطرف الثالث وواجهات برمجة التطبيقات (APIs) دعمًا مدمجًا لتقنية CORS. راجع وثائق الخدمة الخارجية لمعرفة ما إذا كانت توفر خيارات لتفعيل CORS لنطاقك.

• الاتصال بمزود الخادم الخارجي: تواصل مع مزود المورد الخارجي واطلب منه إضافة نطاقك إلى Access-Control-Allow-Origin رأس

• ضبط إعدادات الخادم: يمكنك ضبط إعدادات خادمك لإصلاح أخطاء CORS. على سبيل المثال، إذا كنت تستخدم Apache، يمكنك إضافة ما يلي إلى ملف الإعدادات الخاص بك:

<IfModule mod_headers.c>تم تعيين رأس Access-Control-Allow-Origin إلى "*"، وتم تعيين رأس Access-Control-Allow-Methods إلى "GET, POST, PUT, DELETE, OPTIONS"، وتم تعيين رأس Access-Control-Allow-Headers إلى "Content-Type, Authorization".</IfModule>

بالنسبة لـ Nginx، يمكنك استخدام:

location / { if ($request_method = 'OPTIONS') { add_header 'Access-Control-Allow-Origin' '*'; add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS'; add_header 'Access-Control-Allow-Headers' 'Content-Type, Authorization'; return 204; } add_header 'Access-Control-Allow-Origin' '*'; }

كيفية اختبار ما إذا تم حل مشكلة CORS؟

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

• تحقق من وحدة تحكم المتصفح: افتح أدوات مطوري المتصفح، وانتقل إلى علامة التبويب "وحدة التحكم"، وابحث عن أي رسائل خطأ متعلقة بـ CORS. إذا لم تجد أي رسائل خطأ، فقد تكون المشكلة قد حُلت.

• مراجعة طلبات الشبكة: انتقل إلى علامة التبويب "الشبكة" في أدوات المطورين وأعد تحميل الصفحة. تحقق هنا مما إذا تم إصلاح الطلبات التي فشلت سابقًا. انقر أيضًا على هذه الطلبات للتحقق من صحة العناوين.

• اختبار الوظائف: تحقق مما إذا كانت الميزات التي كانت تفشل بسبب أخطاء CORS، مثل استدعاءات API أو تحميل الخطوط أو طلبات AJAX، تعمل الآن كما هو متوقع.

يمكنك أيضًا استخدام أدوات فحص CORS عبر الإنترنت للتحقق مما إذا كانت الموارد الخارجية التي تصل إليها مهيأة بشكل صحيح للسماح بطلبات المصادر المختلفة.

تعرّف على: كيفية إجراء اختبار قابلية الاستخدام على مواقع ووردبريس

أفضل الممارسات لتكوين CORS

باتباع أفضل الممارسات هذه، يمكنك تكوين CORS بشكل آمن والتأكد من أن موقع WordPress الخاص بك يظل محميًا أثناء عمله بسلاسة.

• السماح بمصادر محددة: بدلاً من السماح بجميع المصادر باستخدام رمز البدل (*)، حدد المصادر المحددة المسموح لها بالوصول إلى مواردك. يعزز هذا الإجراء الأمان من خلال تقييد الوصول إلى النطاقات الموثوقة.

• تقييد الطرق المسموح بها: اسمح فقط بطرق HTTP التي يتطلبها تطبيقك، مثل GET و POST و OPTIONS. هذا يقلل من خطر الإجراءات غير المصرح بها.

• تقييد العناوين: اسمح فقط بالعناوين المحددة التي يحتاجها تطبيقك. هذا يمنع الكشف غير الضروري عن المعلومات الحساسة. على سبيل المثال، اسمح بعنواني "Content-Type" و"Authorization" إذا كانا مطلوبين.

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

• تحديد الحد الأقصى المناسب للعمر: حدد Access-Control-Max-Age لتحديد مدة تخزين نتائج طلب التحقق المسبق مؤقتًا. هذا يقلل من عدد طلبات التحقق المسبق التي يعالجها خادمك، مما يحسن الأداء.

وأخيرًا، راجع وراقب إعدادات CORS بانتظام للتأكد من أنها تلبي متطلبات الأمان والوظائف. حدّث الإعدادات مع تطور تطبيقك.

للمزيد من التعلم: تحسين أداء قاعدة بيانات ووردبريس

الخلاصة

يُعدّ معالجة أخطاء CORS في ووردبريس أمرًا ضروريًا للحفاظ على وظائف موقعك الإلكتروني وتجربة المستخدم.

من خلال فهم السيناريوهات الشائعة وتطبيق الحلول المناسبة، يمكنك حل هذه المشكلات بفعالية.

ومع ذلك، إذا استمرت المشاكل أو بدت الحلول معقدة للغاية، فلا تتردد في طلب المساعدة من متخصصين.

الاحترافية لخدمات دعم ووردبريس أن تقدم مساعدة متخصصة، مما يضمن تشغيل موقعك بسلاسة دون أي انقطاعات متعلقة بـ CORS.

الأسئلة الشائعة حول خطأ CORS في ووردبريس