حل خطأ “فشل طلب الشبكة” في API البعيد بـ React Native

في عالم تطوير البرمجيات، تعتبر واجهات برمجة التطبيقات من الأساسيات التي تعتمد عليها التطبيقات الحديثة، لاسيما تلك المبنية باستخدام React Native. ومع ذلك، يواجه المطورون في بعض الأحيان مشكلات تتعلق بالاتصال بهذه الواجهات، وهو ما يؤدي إلى ظهور أخطاء متعددة مثل "فشل طلب الشبكة". سنناقش في هذا المقال كيفية التعامل مع هذه المشكلة، خاصة بالنسبة للواجهات البعيدة التي لا تمتلك اتصالاً آمنًا (غير SSL).

ما هي المشكلة؟

تواجه العديد من المطورين في تطبيقات React Native مشكلة تتعلق بالإبلاغ عن عدم نجاح الاتصال بواجهة برمجة التطبيقات. في بعض الأحيان، يمكن أن تعمل واجهة برمجة التطبيقات بشكل جيد عبر المتصفح أو أدوات مثل Postman، لكنها تفشل عند محاولة الوصول إليها من تطبيق React Native. يتمثل الخطأ الأكثر شيوعًا في رسالة "فشل طلب الشبكة".

أحد الأسباب الرئيسية لهذه المشكلة هو أن واجهة برمجة التطبيقات التي تحاول الوصول إليها لا تستخدم بروتوكول HTTPS، مما يعني أنها تعمل بدون SSL. هذا الأمر يمكن أن يسبب حالة من الفشل في العديد من التطبيقات، بما في ذلك تلك المبنية باستخدام React Native.

إعدادات تطبيق React Native

للتغلب على هذه المشكلة، يجب على المطورين التأكد من إعدادات تطبيق React Native. يجب إضافة خاصية android:usesCleartextTraffic="true" إلى ملف الـAndroidManifest.xml الخاص بالتطبيق. هذه الإعدادات تسمح لتطبيق React Native بإجراء طلبات شبكة غير مشفرة.

إليك نموذج لكيفية إضافة هذه الخاصية:

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.yourapp">
    <application
        android:usesCleartextTraffic="true"
        ...>
        ...
    </application>
</manifest>

تعديل الكود للفetch API

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

fetch('http://xx.xxx.xxx.xxx:50000/b1s/v1/Login', {
    method: 'GET',
    headers: {
        'Accept': 'application/json',
        'Content-Type': 'application/json'
    },
})
.then((response) => response.json())
.then((responseJson) => {
    console.log(responseJson);
})
.catch((error) => {
    console.error(error);
});

ملاحظة هامة هنا هي تغيير https إلى http لأن واجهة برمجة التطبيقات الخاصة بك ليست مزودة بشهادة SSL.

أهمية تغيير البروتوكول

إذا كانت لديك واجهة برمجة التطبيقات التي تعمل بدون SSL، فيجب أن تكون حذرًا عند استخدام http بدلاً من https. يمكن أن تعرض هذه الخطوة البيانات للخطر في بيئات الإنتاج، لذا يُفضل استخدام بروتوكولات آمنة.

استنتاجات نهائية

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

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