ReactJS: na het toevoegen van de Chrome CORS-plug-in kon onverwerkte afwijzing (TypeError) niet worden opgehaald

Omgaan met API-fouten in React: CORS Plugin-uitdagingen

Bij het werken met API's in ReageerJS, komen ontwikkelaars vaak verschillende uitdagingen tegen die verband houden met het ophalen van gegevens, vooral als ze te maken hebben met API's van derden. Een veel voorkomend probleem dat zich voordoet is de fout 'Unhandled Rejection (TypeError): Failed to fetch'. Deze fout kan zelfs optreden bij het gebruik van populaire API's zoals Swiggy's restaurantlijst-API, die veel ontwikkelaars gebruiken om hun webapplicaties te verbeteren.

In dit geval lijkt het toevoegen van een CORS Chrome-extensie misschien een haalbare oplossing om restrictief browserbeleid te omzeilen. Het kan echter nieuwe complicaties introduceren in plaats van het probleem op te lossen. Als u een CORS-plug-in in uw ontwikkelomgeving gebruikt en uw API-verzoeken kort na het laden mislukken, kunt u een probleem tegenkomen waarbij de plug-in conflicteert met het verzoekafhandelingsgedrag van de browser.

Inzicht in het beheren van cross-origineverzoeken en het oplossen van problemen CORS-fouten in ReactJS is essentieel voor een soepel ontwikkelingsproces. API's zoals die van Swiggy beschikken vaak over beveiligingslagen, zoals CORS, om de toegang van ongeautoriseerde clients te controleren. Deze beperkingen kunnen leiden tot fouten die op de juiste manier moeten worden aangepakt.

In deze handleiding onderzoeken we waarom deze fout optreedt, vooral na het toevoegen van een CORS-plug-in in Chrome. We bespreken ook strategieën om dit probleem op te lossen terwijl we werken met de Swiggy API in uw Reageren toepassingen.

Oplossingen uitleggen voor CORS-problemen in React met Swiggy API

In de eerste oplossing hebben we een Knooppunt.js backend met behulp van Express om het CORS-probleem te omzeilen bij het ophalen van de restaurantgegevens uit de API van Swiggy. Het CORS-beleid voorkomt dat browsers verzoeken indienen bij een ander domein, tenzij dat domein dit toestaat. Door een eenvoudige server te creëren, kunnen we fungeren als middenlaag tussen de client en de API, door de dataserverkant op te halen en terug te sturen naar de React-front-end. Met deze methode worden CORS-fouten vermeden, omdat de aanvraag afkomstig is van dezelfde oorsprong als de client-app.

De Express-backend stelt aangepaste headers in, met name de Toegangscontrole-Allow-Origin, waarmee onze klant de bronnen kan opvragen zonder te maken te krijgen met CORS-beperkingen. De ophaalaanroep naar de API van Swiggy vindt plaats op de server en de gegevens worden geretourneerd in JSON-indeling. Deze aanpak wordt in productieomgevingen vaak als veiliger en performanter beschouwd, omdat API-sleutels of gevoelige informatie hierdoor worden verborgen. Bovendien zorgt het gebruik van try-catch voor een goede foutafhandeling, waarbij gebruiksvriendelijke foutmeldingen worden weergegeven als de API niet reageert.

In de tweede oplossing wijzigen we het ophaalverzoek op de React-code aan de clientzijde. Bij deze methode worden aangepaste headers toegevoegd aan de fetch-aanroep, zodat de aanvraag correct is opgemaakt voordat deze de API bereikt. Wij gebruiken React gebruikEffect hook om de API-aanroep te activeren wanneer de component wordt geactiveerd. De asynchrone functie wacht op het API-antwoord, converteert dit naar JSON en verwerkt fouten als het verzoek mislukt. Deze oplossing heeft echter nog steeds te maken met CORS-problemen als de API geen cross-originele verzoeken van browsers rechtstreeks toestaat.

Ten slotte gebruiken we in de derde oplossing een service van derden genaamd CORS-Anywhere. Dit is een middleware-service die tijdelijk CORS-beperkingen helpt omzeilen door het API-verzoek via hun server om te leiden. Hoewel deze oplossing in ontwikkelomgevingen kan werken, wordt deze niet aanbevolen voor productie vanwege beveiligingsrisico's en de afhankelijkheid van externe services. Het introduceert ook prestatie-overhead omdat het een extra laag toevoegt aan het proces voor het ophalen van gegevens. Het gebruik van deze methode kan handig zijn tijdens testfasen, maar moet om veiligheidsredenen tijdens de productie worden vermeden.

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;

CORS-problemen oplossen in API-aanvragen

Een van de onderliggende redenen voor de fout 'Failed to fetch' in een React-applicatie, vooral bij gebruik van API's van derden zoals Swiggy, is CORS (Cross-Origin Resource Sharing) beperkingen. CORS is een beveiligingsfunctie die ervoor zorgt dat webapplicaties geen verzoeken kunnen indienen bij een ander domein dan het domein van waaruit ze zijn aangeboden. In dit geval wijst de Swiggy API het verzoek af omdat het afkomstig is van een ander domein (uw React-app). Dit is met name problematisch wanneer u gegevens ophaalt van API's die cross-origin-verzoeken niet expliciet ondersteunen.

Een veel voorkomende oplossing is het gebruik van browserextensies zoals de Chrome-extensie 'Allow CORS'. Dergelijke uitbreidingen kunnen echter tot inconsistente resultaten leiden. Dit komt omdat ze instellingen op browserniveau manipuleren die niet altijd correct synchroniseren met API-verzoeken. Deze plug-ins zouden idealiter alleen voor ontwikkeling moeten worden gebruikt en niet in productieomgevingen. Voor productie zou een veiligere en betrouwbaardere aanpak het gebruik van een backend-proxyserver zijn die de gegevens opvraagt ​​namens uw React-app, zoals te zien in de eerder geboden oplossingen.

Een ander aspect waarmee rekening moet worden gehouden, is het effectief omgaan met fouten. Hoewel CORS-problemen een veelvoorkomende oorzaak zijn van 'Failed to fetch'-fouten, kunnen andere factoren zoals netwerkinstabiliteit, onjuiste API-URL's of serveruitval ook tot deze fout leiden. Daarom is het belangrijk om te implementeren robuuste foutafhandeling in uw code, vooral als u met API's van derden werkt. Een goed foutafhandelingsmechanisme helpt het probleem effectiever op te lossen en zorgt voor gebruiksvriendelijke berichten als er iets misgaat.