عدم ذكر رأس “X-WP-Nonce” في عميل Thunder

عندما نعمل على تطبيقات React التي تتفاعل مع واجهات برمجة التطبيقات (APIs)، قد نواجه بعض التحديات. واحدة من هذه التحديات هي التعامل مع رموز "X-WP-Nonce" المطلوبة لأغراض الأمان، وخاصة عند استخدام أدوات مثل Thunder Client أو Postman. في هذا المقال، سنستعرض كيفية معالجة مشكلة غياب رأس "X-WP-Nonce" أثناء العمل مع Thunder Client، وما هي الإعدادات اللازمة للتأكد من أن كل شيء يعمل بشكل صحيح.

ما هو رمز “X-WP-Nonce” ولماذا نحتاجه؟

رمز "X-WP-Nonce" هو رمز أمان يستخدم في ووردبريس لحماية الاستدعاءات API من هجمات CSRF (Cross-Site Request Forgery). يتم استخدامه للتأكد من أن الطلبات تأتي من مصدر موثوق. عند تنفيذ واجهات REST API في ووردبريس، يجب تضمين هذا الرمز في رأس الطلب للتحقق من صحة الطلب.

كيفية إعداد الطلب في React

في تطبيق React، يمكن أن يبدو كود جلب البيانات كالتالي:

try {
    const response = await fetch(uri, {
        method: 'POST',
        credentials: 'include',
        headers: {
            'Content-Type': 'application/json',
            'X-WP-Nonce': window.studio_w_obj.nonce,
        },
        body: JSON.stringify(formData),
    });
    if (!response.ok) {
        throw new Error(`HTTP error! status: ${response.status}`);
    }
    onCreateEvent(await response.json());
} catch (error) {
    setError(error.message);
}

كما يُظهر الكود أعلاه، يتم تضمين رأس "X-WP-Nonce" ضمن رؤوس الطلب. إذا كنت تعمل بشكل مباشر في واجهة ووردبريس، ستحصل على البيانات بشكل صحيح. ولكن عند استخدام أدوات مثل Thunder Client أو Postman، قد تواجه الرد التالي:

{
  "code": "rest_cookie_invalid_nonce",
  "message": "Cookie check failed",
  "data": {
    "status": 403
  }
}

حل مشكلة عدم وجود “X-WP-Nonce” في Thunder Client

عند محاولة الوصول إلى البيانات عبر Thunder Client، يجب التأكد من أن الكود يرسل رأس "X-WP-Nonce". لكن لاحظت أن هذا الرأس يكون فارغاً في Thunder Client بينما تكون قيمته متاحة في ووردبريس. لحل هذه المشكلة، يجب التأكد من أنك قد قمت بتطبيق الإعدادات الصحيحة في Thunder Client.

الإعدادات المطلوبة في Thunder Client

1. تأكيد وجود رأس "X-WP-Nonce": تأكد من أنك قد أضفت الرأس بشكل صحيح. يمكنك فعل ذلك من خلال إعدادات الطلب والتأكد من أن القيمة المرسلة هي نفس القيمة التي تراها في واجهة ووردبريس.
2. تمكين CORS: يجب التأكد من أن إعدادات CORS لديك صحيحة وأن الخادم يتيح رؤوسك المخصصة. في ملف .htaccess، يمكن التأكد من إضافة ما يلي:

Header set Access-Control-Allow-Origin "*"
Header set Access-Control-Allow-Methods "POST, GET, OPTIONS, PUT, DELETE"
Header set Access-Control-Allow-Headers "X-WP-Nonce, Content-Type, Authorization"

1. الإعدادات في PHP: كذلك في بيئة ووردبريس، يمكنك إضافة الرؤوس باستخدام الدالة add_cors_http_header:

function add_cors_http_header() {
    header("Access-Control-Allow-Origin: http://localhost:3000");
    header("Access-Control-Allow-Methods: GET, POST, OPTIONS, DELETE, PUT");
    header("Access-Control-Allow-Headers: Content-Type, Authorization, X-WP-Nonce");
}
add_action('init', 'add_cors_http_header');

الحصول على استجابة صحيحة يتطلب السعي للحصول على الإعدادات الصحيحة لجعل عملك فعالاً. إذا استمرت المشكلة، يمكنك تشغيل الوضع التصحيحي لـ PHP (WP_DEBUG) لمساعدتك في تحديد الأخطاء.

ختاماً

تأكد من مراجعة كل الإعدادات المتعلقة برأس "X-WP-Nonce" في Thunder Client والتأكد من أنه يتم تضمينه بشكل صحيح. معالجة هذه المشكلة تتطلب فهماً دقيقاً لكيفية عمل رموز الأمان والإعدادات اللازمة في بيئة ووردبريس. من خلال اتباع الخطوات المذكورة سابقاً، يمكنك التغلب على هذه العقبة وتحسين تجربتك في تطوير تطبيقات React الخاصة بك.