ReactJS: Efter tilføjelse af Chrome CORS-plugin, kunne ubehandlet afvisning (TypeError) ikke hentes

Håndtering af API-fejl i React: CORS Plugin-udfordringer

Når du arbejder med API'er i ReactJS, støder udviklere ofte på forskellige udfordringer relateret til datahentning, især når de har at gøre med tredjeparts API'er. Et almindeligt problem, der opstår, er fejlen "Ubehandlet afvisning (TypeError): Kunne ikke hentes". Denne fejl kan opstå, selv når du bruger populære API'er som Swiggys restaurant list API, som mange udviklere bruger til at forbedre deres webapplikationer.

I dette tilfælde kan tilføjelse af en CORS Chrome-udvidelse virke som en levedygtig løsning til at omgå restriktive browserpolitikker. Det kan dog introducere nye komplikationer i stedet for at løse problemet. Hvis du bruger et CORS-plugin i dit udviklingsmiljø, og dine API-anmodninger mislykkes kort efter indlæsning, kan du løbe ind i et problem, hvor pluginnet er i konflikt med browserens anmodningshåndteringsadfærd.

Forståelse af, hvordan man håndterer anmodninger på tværs af oprindelse og fejlfinder CORS fejl i ReactJS er afgørende for en smidig udviklingsproces. API'er som Swiggys har ofte sikkerhedslag, såsom CORS, på plads for at kontrollere adgang fra uautoriserede klienter. Disse begrænsninger kan føre til fejl, der skal løses korrekt.

I denne vejledning vil vi undersøge, hvorfor denne fejl opstår, især efter tilføjelse af et CORS-plugin i Chrome. Vi vil også diskutere strategier til at løse det, mens vi arbejder med Swiggy API i din Reagere applikationer.

Forklaring af løsninger til CORS-problemer i React med Swiggy API

I den første løsning lavede vi en Node.js backend, der bruger Express til at omgå CORS-problemet, når restaurantdataene hentes fra Swiggys API. CORS-politikken forhindrer browsere i at sende anmodninger til et andet domæne, medmindre dette domæne tillader det. Ved at oprette en simpel server kan vi fungere som et mellemlag mellem klienten og API'en, hente dataserversiden og returnere den til React-frontenden. Denne metode undgår CORS-fejl, da anmodningen kommer fra samme oprindelse som klientappen.

Express-backend opsætter brugerdefinerede headere, især Access-Control-Allow-Origin, som gør det muligt for vores klient at anmode om ressourcerne uden at stå over for CORS-begrænsninger. Hent-kaldet til Swiggys API laves på serversiden, og dataene returneres i JSON-format. Denne tilgang anses ofte for at være mere sikker og mere effektiv i produktionsmiljøer, da den skjuler API-nøgler eller følsomme oplysninger. Desuden sikrer brugen af ​​try-catch korrekt fejlhåndtering, og viser brugervenlige fejlmeddelelser, hvis API'en ikke reagerer.

I den anden løsning ændrer vi henteanmodningen på klientsidens React-kode. Denne metode involverer tilføjelse af tilpassede overskrifter i hentekaldet, hvilket sikrer, at anmodningen er korrekt formateret, før den når API'en. Vi bruger React's useEffect hook for at udløse API-kaldet, når komponenten monteres. Asynkronfunktionen venter på API-svaret, konverterer det til JSON og håndterer fejl, hvis anmodningen mislykkes. Denne løsning står dog stadig over for CORS-problemer, hvis API'en ikke tillader krydsoprindelsesanmodninger fra browsere direkte.

Endelig bruger vi i den tredje løsning en tredjepartstjeneste kaldet CORS-Anywhere. Dette er en middleware-tjeneste, der midlertidigt hjælper med at omgå CORS-begrænsninger ved at omdirigere API-anmodningen gennem deres server. Selvom denne løsning kan fungere i udviklingsmiljøer, anbefales den ikke til produktion på grund af sikkerhedsrisici og afhængigheden af ​​eksterne tjenester. Det introducerer også ydeevneoverhead, da det tilføjer et ekstra lag til datahentningsprocessen. Brug af denne metode kan være praktisk under testfaser, men bør undgås i produktionen af ​​sikkerhedsmæssige årsager.

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;

Fejlfinding af CORS-problemer i API-anmodninger

En af de underliggende årsager til fejlen "Kunnede ikke hente" i en React-applikation, især når du bruger tredjeparts API'er som Swiggy, er CORS (Cross-Origin Resource Sharing) restriktioner. CORS er en sikkerhedsfunktion, der begrænser webapplikationer i at sende anmodninger til et andet domæne end det, de blev serveret fra. I dette tilfælde afviser Swiggy API anmodningen, fordi den stammer fra et andet domæne (din React-app). Dette er især problematisk, når du henter data fra API'er, der ikke eksplicit understøtter anmodninger om krydsoprindelse.

En almindelig løsning er at bruge browserudvidelser som "Allow CORS" Chrome-udvidelsen. Sådanne udvidelser kan dog føre til inkonsistente resultater. Dette skyldes, at de manipulerer indstillinger på browserniveau, der ikke altid synkroniseres korrekt med API-anmodninger. Disse plugins bør ideelt set kun bruges til udvikling og ikke i produktionsmiljøer. Til produktion ville en sikrere og mere pålidelig tilgang være at bruge en backend-proxyserver, der anmoder om dataene på vegne af din React-app, som det ses i de løsninger, der blev leveret tidligere.

Et andet aspekt at overveje er at håndtere fejl effektivt. Selvom CORS-problemer er en almindelig årsag til "Kunne ikke hente"-fejl, kan andre faktorer som netværksustabilitet, forkerte API-URL'er eller servernedetid også resultere i denne fejl. Derfor er det vigtigt at implementere robust fejlhåndtering i din kode, især når du arbejder med tredjeparts API'er. En korrekt fejlhåndteringsmekanisme vil hjælpe med at debugge problemet mere effektivt og give brugervenlige beskeder, når noget går galt.