ReactJS: Chrome CORS प्लगइन जोडल्यानंतर, न हाताळलेले नकार (TypeError) आणण्यात अयशस्वी

प्रतिक्रिया मध्ये API त्रुटी हाताळणे: CORS प्लगइन आव्हाने

मध्ये API सह कार्य करताना ReactJS, डेव्हलपर्सना अनेकदा डेटा आणण्याशी संबंधित विविध आव्हानांचा सामना करावा लागतो, विशेषत: तृतीय-पक्ष API सह व्यवहार करताना. उद्भवणारी एक सामान्य समस्या म्हणजे "अनहँडल रिजेक्शन (TypeError): आणण्यात अयशस्वी" त्रुटी. स्विगीच्या रेस्टॉरंट लिस्ट API सारखे लोकप्रिय API वापरताना देखील ही त्रुटी येऊ शकते, जे अनेक विकासक त्यांचे वेब ऍप्लिकेशन वर्धित करण्यासाठी वापरतात.

या प्रकरणात, एक CORS Chrome विस्तार जोडणे प्रतिबंधात्मक ब्राउझर धोरणांना बायपास करण्यासाठी एक व्यवहार्य उपाय वाटू शकते. तथापि, समस्या सोडवण्याऐवजी नवीन गुंतागुंत होऊ शकते. जर तुम्ही तुमच्या डेव्हलपमेंट वातावरणात CORS प्लगइन वापरत असाल आणि तुमच्या API विनंत्या लोड झाल्यानंतर काही वेळातच अयशस्वी झाल्या, तर तुम्हाला समस्या उद्भवू शकते जिथे प्लगइन ब्राउझरच्या विनंती-हँडलिंग वर्तनाशी संघर्ष करत असेल.

क्रॉस-ओरिजिन विनंत्या आणि समस्यानिवारण कसे व्यवस्थापित करावे हे समजून घेणे CORS त्रुटी सुरळीत विकास प्रक्रियेसाठी ReactJS मध्ये आवश्यक आहे. स्विगी सारख्या API मध्ये अनधिकृत क्लायंटकडून प्रवेश नियंत्रित करण्यासाठी अनेकदा CORS सारखे सुरक्षा स्तर असतात. या निर्बंधांमुळे त्रुटी उद्भवू शकतात ज्यांना योग्यरित्या संबोधित करणे आवश्यक आहे.

या मार्गदर्शकामध्ये, ही त्रुटी का उद्भवते हे आम्ही एक्सप्लोर करू, विशेषतः Chrome मध्ये CORS प्लगइन जोडल्यानंतर. तुमच्या मध्ये Swiggy API सह काम करत असताना आम्ही त्याचे निराकरण करण्याच्या धोरणांवर देखील चर्चा करू प्रतिक्रिया द्या अनुप्रयोग

स्विगी एपीआय सह प्रतिक्रियामध्ये CORS समस्यांसाठी उपाय स्पष्ट करणे

पहिल्या सोल्युशनमध्ये, आम्ही ए Node.js Swiggy's API वरून रेस्टॉरंट डेटा आणताना CORS समस्येला बायपास करण्यासाठी एक्सप्रेस वापरून बॅकएंड. CORS धोरण ब्राउझरना वेगळ्या डोमेनला विनंती करण्यापासून प्रतिबंधित करते जोपर्यंत ते डोमेन परवानगी देत ​​नाही. एक साधा सर्व्हर तयार करून, आम्ही क्लायंट आणि API मधील मधला स्तर म्हणून काम करू शकतो, डेटा सर्व्हर-साइड आणतो आणि तो रिॲक्ट फ्रंट-एंडवर परत करतो. ही पद्धत CORS त्रुटी टाळते कारण विनंती क्लायंट ॲप सारख्याच उत्पत्तीकडून येते.

एक्सप्रेस बॅकएंड सानुकूल शीर्षलेख सेट करते, विशेषतः प्रवेश-नियंत्रण-अनुमती-मूळ, जे आमच्या क्लायंटला CORS निर्बंधांचा सामना न करता संसाधनांची विनंती करण्यास अनुमती देते. Swiggy च्या API वर कॉल आणणे सर्व्हर-साइड केले जाते आणि डेटा JSON फॉरमॅटमध्ये परत केला जातो. हा दृष्टिकोन उत्पादन वातावरणात अधिक सुरक्षित आणि कार्यक्षम मानला जातो कारण तो API की किंवा संवेदनशील माहिती लपवतो. शिवाय, ट्राय-कॅचचा वापर योग्य त्रुटी हाताळणी सुनिश्चित करतो, API प्रतिसाद देण्यात अयशस्वी झाल्यास वापरकर्ता-अनुकूल त्रुटी संदेश प्रदर्शित करतो.

दुस-या सोल्युशनमध्ये, आम्ही क्लायंट-साइड रिॲक्ट कोडवर फेच रिक्वेस्टमध्ये बदल करतो. या पद्धतीमध्ये फेच कॉलमध्ये सानुकूल शीर्षलेख जोडणे समाविष्ट आहे, API वर पोहोचण्यापूर्वी विनंती योग्यरित्या फॉरमॅट केली आहे याची खात्री करणे. आम्ही React वापरतो प्रभाव वापरा घटक माउंट झाल्यावर API कॉल ट्रिगर करण्यासाठी हुक. async फंक्शन API प्रतिसादाची प्रतीक्षा करते, JSON मध्ये रूपांतरित करते आणि विनंती अयशस्वी झाल्यास त्रुटी हाताळते. तथापि, जर API थेट ब्राउझरकडून क्रॉस-ओरिजिन विनंत्यांना अनुमती देत ​​नसेल तर हे समाधान अद्याप CORS समस्यांना तोंड देत आहे.

शेवटी, तिसऱ्या सोल्यूशनमध्ये, आम्ही CORS-Anywhere नावाची तृतीय-पक्ष सेवा वापरतो. ही एक मिडलवेअर सेवा आहे जी त्यांच्या सर्व्हरद्वारे API विनंतीचा मार्ग बदलून तात्पुरती CORS निर्बंधांना बायपास करण्यात मदत करते. हे समाधान विकास वातावरणात कार्य करू शकते, तरीही सुरक्षा धोके आणि बाह्य सेवांवरील अवलंबित्वामुळे उत्पादनासाठी याची शिफारस केलेली नाही. हे कार्यप्रदर्शन ओव्हरहेड देखील सादर करते कारण ते डेटा आणण्याच्या प्रक्रियेत अतिरिक्त स्तर जोडते. चाचणी टप्प्यांमध्ये ही पद्धत वापरणे सोयीचे असू शकते परंतु सुरक्षिततेच्या कारणास्तव उत्पादनात टाळले पाहिजे.

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}`);
});

१

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;

API विनंत्यांमधील CORS समस्यांचे निवारण करणे

रिॲक्ट ऍप्लिकेशनमध्ये "आणण्यात अयशस्वी" त्रुटीचे एक मूलभूत कारण, विशेषत: स्विगी सारखे तृतीय-पक्ष API वापरताना, हे आहे CORS (क्रॉस-ओरिजिन रिसोर्स शेअरिंग) प्रतिबंध. CORS हे एक सुरक्षा वैशिष्ट्य आहे जे वेब ऍप्लिकेशन्सना ते ज्या डोमेनवरून सर्व्ह केले होते त्यापेक्षा वेगळ्या डोमेनवर विनंत्या करण्यापासून प्रतिबंधित करते. या प्रकरणात, Swiggy API विनंती नाकारते कारण ती वेगळ्या डोमेनवरून (तुमचे React ॲप) उद्भवते. जेव्हा तुम्ही क्रॉस-ओरिजिन विनंत्यांचे स्पष्टपणे समर्थन करत नसलेल्या API वरून डेटा आणत असाल तेव्हा हे विशेषतः समस्याप्रधान आहे.

एक सामान्य उपाय म्हणजे "CORS परवानगी द्या" Chrome विस्तारासारखे ब्राउझर विस्तार वापरणे. तथापि, अशा विस्तारांमुळे विसंगत परिणाम होऊ शकतात. हे असे आहे कारण ते ब्राउझर-स्तरीय सेटिंग्ज हाताळतात जे नेहमी API विनंत्यांसह योग्यरित्या सिंक्रोनाइझ होत नाहीत. हे प्लगइन आदर्शपणे केवळ विकासासाठी वापरले पाहिजे आणि उत्पादन वातावरणात नाही. उत्पादनासाठी, एक सुरक्षित आणि अधिक विश्वासार्ह दृष्टीकोन बॅकएंड प्रॉक्सी सर्व्हर वापरणे असेल जो तुमच्या प्रतिक्रिया ॲपच्या वतीने डेटाची विनंती करतो, जसे की आधी प्रदान केलेल्या उपायांमध्ये पाहिले आहे.

विचारात घेण्यासारखे आणखी एक पैलू म्हणजे त्रुटी प्रभावीपणे हाताळणे. CORS समस्या हे "आणण्यात अयशस्वी" त्रुटींचे एक सामान्य कारण असले तरी, नेटवर्क अस्थिरता, चुकीचे API URL किंवा सर्व्हर डाउनटाइम यासारख्या इतर घटकांमुळे देखील ही त्रुटी येऊ शकते. म्हणून, अंमलबजावणी करणे महत्वाचे आहे मजबूत त्रुटी हाताळणी तुमच्या कोडमध्ये, विशेषत: तृतीय-पक्ष API सह कार्य करताना. एक योग्य त्रुटी-हँडलिंग यंत्रणा समस्या अधिक प्रभावीपणे डीबग करण्यात मदत करेल आणि काहीतरी चूक झाल्यास वापरकर्ता-अनुकूल संदेश प्रदान करेल.