ReactJS: क्रोम CORS प्लगइन जोड़ने के बाद, अनहैंडल रिजेक्शन (टाइप एरर) लाने में विफल रहा

प्रतिक्रिया में एपीआई त्रुटियों को संभालना: सीओआरएस प्लगइन चुनौतियां

एपीआई के साथ काम करते समय रिएक्टजेएस, डेवलपर्स को अक्सर डेटा प्राप्त करने से संबंधित विभिन्न चुनौतियों का सामना करना पड़ता है, खासकर तीसरे पक्ष के एपीआई के साथ काम करते समय। एक आम समस्या जो उठती है वह है "अनहैंडल रिजेक्शन (टाइप एरर): फेल टू फ़ेच" त्रुटि। यह त्रुटि स्विगी के रेस्तरां सूची एपीआई जैसे लोकप्रिय एपीआई का उपयोग करते समय भी हो सकती है, जिसका उपयोग कई डेवलपर्स अपने वेब अनुप्रयोगों को बढ़ाने के लिए करते हैं।

इस मामले में, प्रतिबंधात्मक ब्राउज़र नीतियों को बायपास करने के लिए CORS क्रोम एक्सटेंशन जोड़ना एक व्यवहार्य समाधान की तरह लग सकता है। हालाँकि, इससे समस्या का समाधान होने के बजाय नई जटिलताएँ उत्पन्न हो सकती हैं। यदि आप अपने विकास परिवेश में सीओआरएस प्लगइन का उपयोग कर रहे हैं, और आपके एपीआई अनुरोध लोड होने के तुरंत बाद विफल हो जाते हैं, तो आप एक समस्या में भाग ले सकते हैं जहां प्लगइन ब्राउज़र के अनुरोध-हैंडलिंग व्यवहार के साथ टकराव करता है।

क्रॉस-ऑरिजिन अनुरोधों को प्रबंधित करने और समस्या निवारण का तरीका समझना सीओआरएस त्रुटियाँ ReactJS में सुचारू विकास प्रक्रिया के लिए आवश्यक है। स्विगी जैसे एपीआई में अक्सर अनधिकृत ग्राहकों की पहुंच को नियंत्रित करने के लिए CORS जैसी सुरक्षा परतें होती हैं। इन प्रतिबंधों से त्रुटियाँ हो सकती हैं जिनका समुचित समाधान करने की आवश्यकता है।

इस गाइड में, हम पता लगाएंगे कि यह त्रुटि क्यों होती है, खासकर क्रोम में सीओआरएस प्लगइन जोड़ने के बाद। हम आपके स्विगी एपीआई के साथ काम करते समय इसे हल करने की रणनीतियों पर भी चर्चा करेंगे प्रतिक्रिया अनुप्रयोग.

स्विगी एपीआई के साथ रिएक्ट में सीओआरएस मुद्दों के समाधान की व्याख्या करना

पहले समाधान में, हमने एक बनाया नोड.जे.एस स्विगी के एपीआई से रेस्तरां डेटा प्राप्त करते समय सीओआरएस मुद्दे को बायपास करने के लिए एक्सप्रेस का उपयोग करके बैकएंड। CORS नीति ब्राउज़र को किसी भिन्न डोमेन पर अनुरोध करने से रोकती है जब तक कि वह डोमेन इसकी अनुमति न दे। एक साधारण सर्वर बनाकर, हम क्लाइंट और एपीआई के बीच एक मध्य परत के रूप में कार्य कर सकते हैं, डेटा सर्वर-साइड ला सकते हैं और इसे रिएक्ट फ्रंट-एंड पर लौटा सकते हैं। यह विधि सीओआरएस त्रुटियों से बचती है क्योंकि अनुरोध क्लाइंट ऐप के समान मूल से आता है।

एक्सप्रेस बैकएंड विशेष रूप से कस्टम हेडर सेट करता है पहुंच-नियंत्रण-अनुमति-उत्पत्ति, जो हमारे ग्राहक को सीओआरएस प्रतिबंधों का सामना किए बिना संसाधनों का अनुरोध करने की अनुमति देता है। स्विगी के एपीआई के लिए फ़ेच कॉल को सर्वर-साइड बनाया गया है, और डेटा JSON प्रारूप में लौटाया गया है। इस दृष्टिकोण को अक्सर उत्पादन परिवेश में अधिक सुरक्षित और निष्पादन योग्य माना जाता है क्योंकि यह एपीआई कुंजी या संवेदनशील जानकारी छुपाता है। इसके अलावा, ट्राई-कैच का उपयोग उचित त्रुटि प्रबंधन सुनिश्चित करता है, यदि एपीआई प्रतिक्रिया देने में विफल रहता है तो उपयोगकर्ता के अनुकूल त्रुटि संदेश प्रदर्शित करता है।

दूसरे समाधान में, हम क्लाइंट-साइड रिएक्ट कोड पर फ़ेच अनुरोध को संशोधित करते हैं। इस विधि में फ़ेच कॉल में कस्टम हेडर जोड़ना शामिल है, जिससे यह सुनिश्चित होता है कि एपीआई तक पहुंचने से पहले अनुरोध सही ढंग से प्रारूपित किया गया है। हम रिएक्ट का उपयोग करते हैं उपयोगप्रभाव घटक माउंट होने पर एपीआई कॉल को ट्रिगर करने के लिए हुक। एसिंक फ़ंक्शन एपीआई प्रतिक्रिया की प्रतीक्षा करता है, इसे JSON में परिवर्तित करता है, और अनुरोध विफल होने पर त्रुटियों को संभालता है। हालाँकि, यदि एपीआई सीधे ब्राउज़र से क्रॉस-ऑरिजिन अनुरोधों की अनुमति नहीं देता है, तो यह समाधान अभी भी CORS समस्याओं का सामना करता है।

अंत में, तीसरे समाधान में, हम CORS-Anywhere नामक तृतीय-पक्ष सेवा का उपयोग करते हैं। यह एक मिडलवेयर सेवा है जो अस्थायी रूप से अपने सर्वर के माध्यम से एपीआई अनुरोध को पुन: रूट करके सीओआरएस प्रतिबंधों को बायपास करने में मदद करती है। हालाँकि यह समाधान विकास परिवेश में काम कर सकता है, लेकिन सुरक्षा जोखिमों और बाहरी सेवाओं पर निर्भरता के कारण इसे उत्पादन के लिए अनुशंसित नहीं किया जाता है। यह प्रदर्शन ओवरहेड का भी परिचय देता है क्योंकि यह डेटा लाने की प्रक्रिया में एक अतिरिक्त परत जोड़ता है। परीक्षण चरणों के दौरान इस पद्धति का उपयोग सुविधाजनक हो सकता है लेकिन सुरक्षा कारणों से उत्पादन में इससे बचना चाहिए।

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 (क्रॉस-ओरिजिनल रिसोर्स शेयरिंग) प्रतिबंध। सीओआरएस एक सुरक्षा सुविधा है जो वेब एप्लिकेशन को उस डोमेन से भिन्न डोमेन पर अनुरोध करने से रोकती है जहां से उन्हें सेवा दी गई थी। इस मामले में, स्विगी एपीआई अनुरोध को अस्वीकार कर देता है क्योंकि यह एक अलग डोमेन (आपका रिएक्ट ऐप) से उत्पन्न होता है। यह विशेष रूप से समस्याग्रस्त है जब आप एपीआई से डेटा प्राप्त कर रहे हैं जो स्पष्ट रूप से क्रॉस-ऑरिजिन अनुरोधों का समर्थन नहीं करते हैं।

एक सामान्य समाधान "अनुमति CORS" क्रोम एक्सटेंशन जैसे ब्राउज़र एक्सटेंशन का उपयोग करना है। हालाँकि, ऐसे एक्सटेंशन से असंगत परिणाम हो सकते हैं। ऐसा इसलिए है क्योंकि वे ब्राउज़र-स्तरीय सेटिंग्स में हेरफेर करते हैं जो हमेशा एपीआई अनुरोधों के साथ ठीक से सिंक्रनाइज़ नहीं होते हैं। इन प्लगइन्स का उपयोग आदर्श रूप से केवल विकास के लिए किया जाना चाहिए, न कि उत्पादन वातावरण में। उत्पादन के लिए, एक सुरक्षित और अधिक विश्वसनीय तरीका बैकएंड प्रॉक्सी सर्वर का उपयोग करना होगा जो आपके रिएक्ट ऐप की ओर से डेटा का अनुरोध करता है, जैसा कि पहले दिए गए समाधानों में देखा गया है।

विचार करने योग्य एक अन्य पहलू त्रुटियों को प्रभावी ढंग से संभालना है। जबकि सीओआरएस मुद्दे "फ़ेच करने में विफल" त्रुटियों का एक सामान्य कारण हैं, नेटवर्क अस्थिरता, गलत एपीआई यूआरएल, या सर्वर डाउनटाइम जैसे अन्य कारक भी इस त्रुटि का परिणाम हो सकते हैं। इसलिए, इसे लागू करना महत्वपूर्ण है मजबूत त्रुटि प्रबंधन आपके कोड में, विशेष रूप से तृतीय-पक्ष API के साथ काम करते समय। एक उचित त्रुटि-हैंडलिंग तंत्र समस्या को अधिक प्रभावी ढंग से डीबग करने में मदद करेगा और कुछ गलत होने पर उपयोगकर्ता के अनुकूल संदेश प्रदान करेगा।