ReactJS: Chrome CORS પ્લગઇન ઉમેર્યા પછી, અનહેન્ડલ્ડ રિજેક્શન (TypeError) લાવવામાં નિષ્ફળ

પ્રતિક્રિયામાં API ભૂલોનું સંચાલન કરવું: CORS પ્લગઇન પડકારો

માં APIs સાથે કામ કરતી વખતે ReactJS, વિકાસકર્તાઓ ઘણીવાર ડેટા મેળવવા સંબંધિત વિવિધ પડકારોનો સામનો કરે છે, ખાસ કરીને જ્યારે તૃતીય-પક્ષ APIs સાથે કામ કરે છે. એક સામાન્ય સમસ્યા જે ઊભી થાય છે તે છે "અનહેન્ડલ્ડ રિજેક્શન (ટાઈપ એરર): ફેચ કરવામાં નિષ્ફળ" ભૂલ. સ્વિગીના રેસ્ટોરન્ટ લિસ્ટ API જેવા લોકપ્રિય API નો ઉપયોગ કરતી વખતે પણ આ ભૂલ આવી શકે છે, જેનો ઉપયોગ ઘણા વિકાસકર્તાઓ તેમની વેબ એપ્લિકેશનને વધારવા માટે કરે છે.

આ કિસ્સામાં, CORS ક્રોમ એક્સ્ટેંશન ઉમેરવું એ પ્રતિબંધિત બ્રાઉઝર નીતિઓને બાયપાસ કરવા માટે યોગ્ય ઉકેલ જેવું લાગે છે. જો કે, તે સમસ્યાને ઉકેલવાને બદલે નવી ગૂંચવણો રજૂ કરી શકે છે. જો તમે તમારા ડેવલપમેન્ટ એન્વાયર્નમેન્ટમાં CORS પ્લગઇનનો ઉપયોગ કરી રહ્યાં છો, અને તમારી API વિનંતીઓ લોડ થયા પછી તરત જ નિષ્ફળ જાય છે, તો તમે એવી સમસ્યાનો સામનો કરી શકો છો કે જ્યાં પ્લગઇન બ્રાઉઝરની વિનંતી-હેન્ડલિંગ વર્તણૂક સાથે વિરોધાભાસી હોય.

ક્રોસ-ઓરિજિન વિનંતીઓ અને મુશ્કેલીનિવારણનું સંચાલન કેવી રીતે કરવું તે સમજવું CORS ભૂલો ReactJS માં સરળ વિકાસ પ્રક્રિયા માટે જરૂરી છે. Swiggy's જેવા API માં વારંવાર સુરક્ષા સ્તરો હોય છે, જેમ કે CORS, અનધિકૃત ગ્રાહકોની ઍક્સેસને નિયંત્રિત કરવા માટે. આ પ્રતિબંધો ભૂલો તરફ દોરી શકે છે જેને યોગ્ય રીતે સંબોધિત કરવાની જરૂર છે.

આ માર્ગદર્શિકામાં, અમે અન્વેષણ કરીશું કે આ ભૂલ શા માટે થાય છે, ખાસ કરીને Chrome માં CORS પ્લગઇન ઉમેર્યા પછી. તમારા સ્વિગી API સાથે કામ કરતી વખતે અમે તેને ઉકેલવા માટેની વ્યૂહરચનાઓ વિશે પણ ચર્ચા કરીશું પ્રતિક્રિયા આપો એપ્લિકેશન્સ

સ્વિગી API સાથે પ્રતિક્રિયામાં CORS સમસ્યાઓ માટે ઉકેલો સમજાવવું

પ્રથમ ઉકેલમાં, અમે એ બનાવ્યું છે Node.js Swiggy's API માંથી રેસ્ટોરન્ટ ડેટા મેળવતી વખતે CORS સમસ્યાને બાયપાસ કરવા માટે એક્સપ્રેસનો ઉપયોગ કરીને બેકએન્ડ. CORS નીતિ બ્રાઉઝર્સને અલગ ડોમેન માટે વિનંતી કરવાથી અટકાવે છે સિવાય કે તે ડોમેન તેને પરવાનગી આપે. એક સાદું સર્વર બનાવીને, અમે ક્લાયંટ અને API વચ્ચેના મધ્યમ સ્તર તરીકે કાર્ય કરી શકીએ છીએ, ડેટા સર્વર-સાઇડ લાવીને તેને રિએક્ટ ફ્રન્ટ-એન્ડ પર પરત કરી શકીએ છીએ. આ પદ્ધતિ CORS ભૂલોને ટાળે છે કારણ કે વિનંતી ક્લાયંટ એપ્લિકેશન જેવી જ મૂળમાંથી આવે છે.

એક્સપ્રેસ બેકએન્ડ કસ્ટમ હેડરો સેટ કરે છે, ખાસ કરીને ઍક્સેસ-નિયંત્રણ-મંજૂરી-મૂળ, જે અમારા ક્લાયન્ટને CORS પ્રતિબંધોનો સામનો કર્યા વિના સંસાધનોની વિનંતી કરવાની મંજૂરી આપે છે. સ્વિગીના API પર આનયન કૉલ સર્વર-સાઇડ કરવામાં આવે છે, અને ડેટા JSON ફોર્મેટમાં પરત કરવામાં આવે છે. આ અભિગમને ઉત્પાદન વાતાવરણમાં વધુ સુરક્ષિત અને પ્રભાવશાળી ગણવામાં આવે છે કારણ કે તે API કી અથવા સંવેદનશીલ માહિતી છુપાવે છે. વધુમાં, ટ્રાય-કેચનો ઉપયોગ યોગ્ય એરર હેન્ડલિંગને સુનિશ્ચિત કરે છે, જો API પ્રતિસાદ આપવામાં નિષ્ફળ જાય તો વપરાશકર્તા-મૈત્રીપૂર્ણ ભૂલ સંદેશાઓ પ્રદર્શિત કરે છે.

બીજા સોલ્યુશનમાં, અમે ક્લાયંટ-સાઇડ રિએક્ટ કોડ પર આનયન વિનંતીને સંશોધિત કરીએ છીએ. આ પદ્ધતિમાં ફેચ કૉલમાં કસ્ટમ હેડર્સ ઉમેરવાનો સમાવેશ થાય છે, એ સુનિશ્ચિત કરીને કે એપીઆઈ સુધી પહોંચતા પહેલા વિનંતી યોગ્ય રીતે ફોર્મેટ કરવામાં આવી છે. અમે React નો ઉપયોગ કરીએ છીએ અસરનો ઉપયોગ કરો જ્યારે ઘટક માઉન્ટ થાય ત્યારે API કૉલને ટ્રિગર કરવા માટે હૂક. async ફંક્શન API પ્રતિસાદની રાહ જુએ છે, તેને JSON માં રૂપાંતરિત કરે છે, અને જો વિનંતી નિષ્ફળ જાય તો ભૂલોનું સંચાલન કરે છે. જો કે, આ સોલ્યુશન હજુ પણ CORS સમસ્યાઓનો સામનો કરે છે જો API સીધા બ્રાઉઝર્સ તરફથી ક્રોસ-ઓરિજિન વિનંતીઓને મંજૂરી આપતું નથી.

અંતે, ત્રીજા સોલ્યુશનમાં, અમે 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}`);
});

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;

API વિનંતીઓમાં CORS સમસ્યાઓનું નિવારણ

પ્રતિક્રિયા એપ્લિકેશનમાં "આનયન કરવામાં નિષ્ફળ" ભૂલ માટેનું એક મૂળ કારણ છે, ખાસ કરીને જ્યારે સ્વિગી જેવા તૃતીય-પક્ષ API નો ઉપયોગ કરતી વખતે, CORS (ક્રોસ-ઓરિજિન રિસોર્સ શેરિંગ) પ્રતિબંધો. CORS એ એક સુરક્ષા સુવિધા છે જે વેબ એપ્લીકેશનને જેમાંથી તેઓને સેવા આપવામાં આવી હતી તેના કરતાં અલગ ડોમેન પર વિનંતીઓ કરવાથી પ્રતિબંધિત કરે છે. આ કિસ્સામાં, Swiggy API વિનંતીને નકારી કાઢે છે કારણ કે તે એક અલગ ડોમેન (તમારી પ્રતિક્રિયા એપ્લિકેશન)માંથી ઉદ્દભવે છે. આ ખાસ કરીને સમસ્યારૂપ છે જ્યારે તમે API માંથી ડેટા મેળવતા હોવ જે સ્પષ્ટપણે ક્રોસ-ઓરિજિન વિનંતીઓને સમર્થન આપતા નથી.

"CORSને મંજૂરી આપો" Chrome એક્સ્ટેંશન જેવા બ્રાઉઝર એક્સ્ટેંશનનો ઉપયોગ કરવાનો એક સામાન્ય ઉપાય છે. જો કે, આવા વિસ્તરણ અસંગત પરિણામો તરફ દોરી શકે છે. આ એટલા માટે છે કારણ કે તેઓ બ્રાઉઝર-લેવલ સેટિંગ્સને હેરફેર કરે છે જે હંમેશા API વિનંતીઓ સાથે યોગ્ય રીતે સિંક્રનાઇઝ થતા નથી. આ પ્લગઈનો આદર્શ રીતે માત્ર વિકાસ માટે જ ઉપયોગમાં લેવા જોઈએ અને ઉત્પાદન વાતાવરણમાં નહીં. ઉત્પાદન માટે, એક સુરક્ષિત અને વધુ ભરોસાપાત્ર અભિગમ એ બેકએન્ડ પ્રોક્સી સર્વરનો ઉપયોગ કરશે જે તમારી પ્રતિક્રિયા એપ્લિકેશન વતી ડેટાની વિનંતી કરે છે, જેમ કે અગાઉ પૂરા પાડવામાં આવેલ ઉકેલોમાં જોવામાં આવ્યું છે.

ધ્યાનમાં લેવાનું બીજું પાસું એ ભૂલોને અસરકારક રીતે નિયંત્રિત કરવાનું છે. જ્યારે CORS સમસ્યાઓ એ "આનયન કરવામાં નિષ્ફળ" ભૂલોનું સામાન્ય કારણ છે, અન્ય પરિબળો જેવા કે નેટવર્ક અસ્થિરતા, ખોટો API URL અથવા સર્વર ડાઉનટાઇમ પણ આ ભૂલમાં પરિણમી શકે છે. તેથી, તે અમલમાં મૂકવું મહત્વપૂર્ણ છે મજબૂત ભૂલ હેન્ડલિંગ તમારા કોડમાં, ખાસ કરીને તૃતીય-પક્ષ API સાથે કામ કરતી વખતે. યોગ્ય ભૂલ-હેન્ડલિંગ મિકેનિઝમ સમસ્યાને વધુ અસરકારક રીતે ડીબગ કરવામાં મદદ કરશે અને જ્યારે કંઈક ખોટું થાય ત્યારે વપરાશકર્તા-મૈત્રીપૂર્ણ સંદેશાઓ પ્રદાન કરશે.