ReactJS: بعد إضافة مكون Chrome CORS الإضافي، فشل جلب الرفض غير المعالج (TypeError)

التعامل مع أخطاء API في React: تحديات البرنامج المساعد CORS

عند العمل مع واجهات برمجة التطبيقات في ReactJSغالبًا ما يواجه المطورون تحديات مختلفة تتعلق بجلب البيانات، خاصة عند التعامل مع واجهات برمجة التطبيقات التابعة لجهات خارجية. إحدى المشكلات الشائعة التي تنشأ هي الخطأ "الرفض غير المعالج (TypeError): فشل الجلب". يمكن أن يحدث هذا الخطأ حتى عند استخدام واجهات برمجة التطبيقات الشائعة مثل واجهة برمجة تطبيقات قائمة مطاعم Swiggy، والتي يستخدمها العديد من المطورين لتحسين تطبيقات الويب الخاصة بهم.

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

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

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

شرح الحلول لمشكلات CORS في React with Swiggy API

في الحل الأول قمنا بإنشاء ملف Node.js الواجهة الخلفية باستخدام Express لتجاوز مشكلة CORS عند جلب بيانات المطعم من Swiggy’s API. تمنع سياسة CORS المتصفحات من تقديم طلبات إلى مجال مختلف ما لم يسمح هذا المجال بذلك. من خلال إنشاء خادم بسيط، يمكننا العمل كطبقة وسطى بين العميل وواجهة برمجة التطبيقات (API)، وجلب البيانات من جانب الخادم وإعادتها إلى واجهة React الأمامية. تتجنب هذه الطريقة أخطاء CORS نظرًا لأن الطلب يأتي من نفس مصدر تطبيق العميل.

تقوم الواجهة الخلفية Express بإعداد رؤوس مخصصة، خاصة التحكم في الوصول-السماح-الأصل، والذي يسمح لعملائنا بطلب الموارد دون مواجهة قيود CORS. يتم إجراء استدعاء الجلب إلى Swiggy's API من جانب الخادم، ويتم إرجاع البيانات بتنسيق JSON. غالبًا ما يُعتبر هذا الأسلوب أكثر أمانًا وأداءً في بيئات الإنتاج نظرًا لأنه يخفي مفاتيح API أو المعلومات الحساسة. علاوة على ذلك، يضمن استخدام محاولة الالتقاط معالجة مناسبة للأخطاء، وعرض رسائل خطأ سهلة الاستخدام في حالة فشل واجهة برمجة التطبيقات في الاستجابة.

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

وأخيرًا، في الحل الثالث، نستخدم خدمة خارجية تسمى CORS-Anywhere. هذه خدمة برمجية وسيطة تساعد مؤقتًا في تجاوز قيود CORS عن طريق إعادة توجيه طلب واجهة برمجة التطبيقات (API) من خلال الخادم الخاص بها. على الرغم من أن هذا الحل يمكن أن يعمل في بيئات التطوير، إلا أنه لا يوصى بإنتاجه بسبب المخاطر الأمنية والاعتماد على الخدمات الخارجية. كما أنه يقدم أيضًا حملًا إضافيًا للأداء لأنه يضيف طبقة إضافية إلى عملية جلب البيانات. يمكن أن يكون استخدام هذه الطريقة مناسبًا أثناء مراحل الاختبار ولكن يجب تجنبه في الإنتاج لأسباب أمنية.

const express = require('express');
const fetch = require('node-fetch');
const app = express();
const port = 5000;

app.use((req, res, next) => {
  res.setHeader('Access-Control-Allow-Origin', '*');
  res.setHeader('Access-Control-Allow-Methods', 'GET');
  next();
});

app.get('/restaurants', async (req, res) => {
  try {
    const response = await fetch('https://www.swiggy.com/dapi/restaurants/list/v5?lat=23.1685786&lng=79.9338798');
    const data = await response.json();
    res.json(data);
  } catch (err) {
    res.status(500).json({ error: 'Failed to fetch restaurants' });
  }
});

app.listen(port, () => {
  console.log(`Server running on http://localhost:${port}`);
});

import React, { useEffect } from 'react';

const Body = () => {
  async function getRestaurants() {
    try {
      const response = await fetch(
        'https://www.swiggy.com/dapi/restaurants/list/v5?lat=23.1685786&lng=79.9338798',
        { headers: { 'Content-Type': 'application/json' } }
      );

      if (!response.ok) {
        throw new Error('Network response was not ok');
      }

      const data = await response.json();
      console.log(data);
    } catch (error) {
      console.error('Fetch error:', error);
    }
  }

  useEffect(() => {
    getRestaurants();
  }, []);
};

export default Body;

const Body = () => {
  async function getRestaurants() {
    try {
      const response = await fetch(
        'https://cors-anywhere.herokuapp.com/https://www.swiggy.com/dapi/restaurants/list/v5?lat=23.1685786&lng=79.9338798'
      );

      const data = await response.json();
      console.log(data);
    } catch (error) {
      console.error('Error fetching restaurants:', error);
    }
  }

  useEffect(() => {
    getRestaurants();
  }, []);
};

export default Body;

استكشاف مشكلات CORS وإصلاحها في طلبات API

أحد الأسباب الأساسية لخطأ "فشل الجلب" في تطبيق React، خاصةً عند استخدام واجهات برمجة التطبيقات التابعة لجهات خارجية مثل Swiggy، هو كورس قيود (مشاركة الموارد عبر الأصل). CORS هي ميزة أمان تقيد تطبيقات الويب من تقديم طلبات إلى نطاق مختلف عن النطاق الذي تم تقديمها منه. في هذه الحالة، ترفض Swiggy API الطلب لأنه ينشأ من مجال مختلف (تطبيق React الخاص بك). يمثل هذا مشكلة بشكل خاص عندما تقوم بجلب البيانات من واجهات برمجة التطبيقات التي لا تدعم الطلبات عبر الأصل بشكل صريح.

الحل الشائع هو استخدام ملحقات المتصفح مثل ملحق Chrome "السماح بـ CORS". ومع ذلك، يمكن أن تؤدي هذه الملحقات إلى نتائج غير متناسقة. وذلك لأنهم يتعاملون مع الإعدادات على مستوى المتصفح التي لا تتم مزامنتها دائمًا بشكل صحيح مع طلبات واجهة برمجة التطبيقات. يجب استخدام هذه المكونات الإضافية بشكل مثالي للتطوير فقط وليس في بيئات الإنتاج. بالنسبة للإنتاج، فإن الطريقة الأكثر أمانًا والموثوقية هي استخدام خادم وكيل خلفي يطلب البيانات نيابة عن تطبيق React الخاص بك، كما هو موضح في الحلول المقدمة سابقًا.

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