ReactJS: Etter å ha lagt til Chrome CORS-plugin-modulen, klarte ikke uhåndtert avvisning (TypeError) å hente

Håndtering av API-feil i React: CORS-plugin-utfordringer

Når du arbeider med APIer i ReactJS, støter utviklere ofte på ulike utfordringer knyttet til datahenting, spesielt når de arbeider med tredjeparts APIer. Et vanlig problem som oppstår er feilen "Ubehandlet avvisning (TypeError): Kunne ikke hente". Denne feilen kan oppstå selv når du bruker populære APIer som Swiggys restaurantliste-API, som mange utviklere bruker for å forbedre nettapplikasjonene sine.

I dette tilfellet kan det å legge til en CORS Chrome-utvidelse virke som en levedyktig løsning for å omgå restriktive nettleserpolicyer. Imidlertid kan det introdusere nye komplikasjoner i stedet for å løse problemet. Hvis du bruker en CORS-plugin i utviklingsmiljøet ditt, og API-forespørslene dine mislykkes kort tid etter lasting, kan det hende du får et problem der plugin-en er i konflikt med nettleserens forespørselshåndtering.

Forstå hvordan du håndterer forespørsler på tvers av opprinnelse og feilsøker CORS feil i ReactJS er avgjørende for en jevn utviklingsprosess. APIer som Swiggys har ofte sikkerhetslag, som CORS, på plass for å kontrollere tilgang fra uautoriserte klienter. Disse begrensningene kan føre til feil som må løses på riktig måte.

I denne veiledningen vil vi utforske hvorfor denne feilen oppstår, spesielt etter å ha lagt til en CORS-plugin i Chrome. Vi vil også diskutere strategier for å løse det mens du arbeider med Swiggy API i din Reagere applikasjoner.

Forklarer løsninger for CORS-problemer i React med Swiggy API

I den første løsningen laget vi en Node.js backend som bruker Express for å omgå CORS-problemet når du henter restaurantdataene fra Swiggys API. CORS-policyen forhindrer nettlesere fra å sende forespørsler til et annet domene med mindre dette domenet tillater det. Ved å lage en enkel server kan vi fungere som et mellomlag mellom klienten og API, hente dataserversiden og returnere den til React-fronten. Denne metoden unngår CORS-feil siden forespørselen kommer fra samme opprinnelse som klientappen.

Express-backend setter opp tilpassede overskrifter, spesielt Access-Control-Allow-Origin, som lar vår klient be om ressursene uten å møte CORS-begrensninger. Hentingskallet til Swiggys API gjøres på serversiden, og dataene returneres i JSON-format. Denne tilnærmingen anses ofte som sikrere og mer effektiv i produksjonsmiljøer siden den skjuler API-nøkler eller sensitiv informasjon. Videre sikrer bruk av try-catch riktig feilhåndtering, og viser brukervennlige feilmeldinger hvis API-en ikke svarer.

I den andre løsningen endrer vi henteforespørselen på React-koden på klientsiden. Denne metoden innebærer å legge til egendefinerte overskrifter i hentekallet, og sikre at forespørselen er riktig formatert før den når API-en. Vi bruker React's useEffect krok for å utløse API-kallet når komponenten monteres. Asynkronfunksjonen venter på API-svaret, konverterer det til JSON og håndterer feil hvis forespørselen mislykkes. Denne løsningen har imidlertid fortsatt CORS-problemer hvis API-en ikke tillater kryssopprinnelsesforespørsler fra nettlesere direkte.

Til slutt, i den tredje løsningen, bruker vi en tredjepartstjeneste kalt CORS-Anywhere. Dette er en mellomvaretjeneste som midlertidig hjelper med å omgå CORS-begrensninger ved å omdirigere API-forespørselen gjennom serveren deres. Selv om denne løsningen kan fungere i utviklingsmiljøer, anbefales den ikke for produksjon på grunn av sikkerhetsrisikoer og avhengighet av eksterne tjenester. Den introduserer også ytelsesoverhead da den legger til et ekstra lag til datahentingsprosessen. Å bruke denne metoden kan være praktisk under testfaser, men bør unngås i produksjon av sikkerhetsmessige årsaker.

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;

Feilsøking av CORS-problemer i API-forespørsler

En av de underliggende årsakene til feilen "Kunnet ikke hente" i en React-applikasjon, spesielt når du bruker tredjeparts APIer som Swiggy, er CORS (Cross-Origin Resource Sharing) restriksjoner. CORS er en sikkerhetsfunksjon som begrenser nettapplikasjoner fra å sende forespørsler til et annet domene enn det de ble servert fra. I dette tilfellet avviser Swiggy API forespørselen fordi den kommer fra et annet domene (React-appen din). Dette er spesielt problematisk når du henter data fra APIer som ikke eksplisitt støtter kryssopprinnelsesforespørsler.

En vanlig løsning er å bruke nettleserutvidelser som «Allow CORS» Chrome-utvidelsen. Imidlertid kan slike utvidelser føre til inkonsekvente resultater. Dette er fordi de manipulerer innstillinger på nettlesernivå som ikke alltid synkroniseres riktig med API-forespørsler. Disse pluginene bør ideelt sett kun brukes til utvikling og ikke i produksjonsmiljøer. For produksjon vil en tryggere og mer pålitelig tilnærming være å bruke en backend proxy-server som ber om dataene på vegne av React-appen din, som vist i løsningene som ble gitt tidligere.

Et annet aspekt å vurdere er å håndtere feil effektivt. Selv om CORS-problemer er en vanlig årsak til «Kunne ikke hente»-feil, kan andre faktorer som nettverksustabilitet, feil API-URL-er eller servernedetid også føre til denne feilen. Derfor er det viktig å implementere robust feilhåndtering i koden din, spesielt når du arbeider med tredjeparts APIer. En riktig feilhåndteringsmekanisme vil bidra til å feilsøke problemet mer effektivt og gi brukervennlige meldinger når noe går galt.