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 , 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 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 applikasjoner.

Kommando	Eksempel på bruk
fetch()	Denne kommandoen brukes til å sende HTTP-forespørsler til Swiggy API. Den henter ressurser asynkront og returnerer et løfte, som løses til et Response-objekt. Det er nøkkelen for å hente restaurantdata fra API.
useEffect()	Brukt i React, tillater denne kroken utførelse av bivirkninger som API-kall etter gjengivelse av komponenten. Det sikrer at hentingsforespørselen til Swiggys API blir gjort når komponenten er montert.
res.setHeader()	Denne Express-kommandoen setter tilpassede HTTP-hoder, som f.eks , som er avgjørende i CORS-håndtering. Det gjør det mulig for backend å tillate forespørsler fra enhver opprinnelse, og forhindrer CORS-feil.
res.json()	Denne metoden brukes til å sende et JSON-svar tilbake til klienten. I proxy-serverløsningen sikrer den at API-dataene hentet fra Swiggy returneres som JSON-format, som grensesnittet enkelt kan konsumere.
await	Dette nøkkelordet stanser utførelsen av den asynkrone funksjonen til henteoperasjonen løser seg, og sikrer at koden venter på API-dataene før den fortsetter, og forhindrer ubehandlede avvisninger.
express()	De funksjonen brukes til å lage en forekomst av en Express-server. Denne serveren fungerer som en proxy mellom frontend og Swiggy API for å forhindre CORS-problemer under datahenting.
app.listen()	Denne kommandoen får Express-serveren til å begynne å lytte etter innkommende forespørsler på en spesifisert port (f.eks. port 5000 i dette tilfellet). Det er avgjørende for å være vert for proxy-serveren lokalt under utvikling.
try...catch	Denne blokken håndterer feil som kan oppstå under hentingsforespørselen, for eksempel nettverksfeil eller problemer med Swiggy API. Det sikrer at appen på en elegant måte håndterer feil i stedet for å krasje.

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

I den første løsningen laget vi en 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 , 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 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 (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 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.

1. Hva er CORS og hvorfor er det viktig?
2. CORS (Cross-Origin Resource Sharing) er en sikkerhetspolicy håndhevet av nettlesere for å forhindre ondsinnede forespørsler fra uklarerte domener. Det sikrer at bare visse domener har lov til å hente ressurser fra en server.
3. Hvorfor får jeg "Ubehandlet avvisning (TypeError): Kunne ikke hente"?
4. Denne feilen oppstår vanligvis når API-forespørselen din er blokkert på grunn av CORS-begrensninger. Det kan også være forårsaket av feil API-URLer eller problemer med serveren.
5. Hva betyr hekte gjøre i denne sammenhengen?
6. De Hook in React brukes til å utløse en API-forespørsel etter at komponenten er montert. Det sikrer at henteoperasjonen skjer til rett tid, og forhindrer flere unødvendige forespørsler.
7. Hvordan kan jeg fikse CORS-feil i en React-applikasjon?
8. For å fikse CORS-feil kan du bruke en backend-proxy, angi riktige overskrifter med i serveren, eller stole på tjenester som CORS-Anywhere for utviklingsformål.
9. Kan jeg bruke CORS nettleserutvidelser i produksjon?
10. Nei, CORS nettleserutvidelser skal bare brukes til utvikling. I produksjon er det tryggere å konfigurere CORS på serveren eller bruke en proxy-server.

CORS-feil er en vanlig utfordring når man utvikler React-applikasjoner som bruker tredjeparts APIer. Selv om nettleserutvidelser kan hjelpe i utviklingen, er det avgjørende å implementere mer pålitelige løsninger som en proxy-server i produksjonsmiljøer for å opprettholde sikkerhet og dataintegritet.

Ved å bruke de riktige teknikkene, som feilhåndtering og backend-løsninger, kan utviklere effektivt håndtere problemer som «Kunnet ikke hente». Dette sikrer at applikasjonen deres gir en jevn brukeropplevelse når de samhandler med APIer, og forbedrer ytelsen og funksjonaliteten.