ReactJS: Nach dem Hinzufügen des Chrome CORS-Plugins konnte die unbehandelte Ablehnung (TypeError) nicht abgerufen werden

Umgang mit API-Fehlern in React: CORS-Plugin-Herausforderungen

Bei der Arbeit mit APIs in ReactJSstoßen Entwickler häufig auf verschiedene Herausforderungen im Zusammenhang mit dem Datenabruf, insbesondere beim Umgang mit APIs von Drittanbietern. Ein häufig auftretendes Problem ist der Fehler „Unhandled Rejection (TypeError): Failed to fetch“. Dieser Fehler kann sogar bei der Verwendung beliebter APIs wie der Restaurantlisten-API von Swiggy auftreten, die viele Entwickler zur Verbesserung ihrer Webanwendungen verwenden.

In diesem Fall scheint das Hinzufügen einer CORS-Chrome-Erweiterung eine praktikable Lösung zur Umgehung restriktiver Browserrichtlinien zu sein. Allerdings kann es zu neuen Komplikationen kommen, anstatt das Problem zu lösen. Wenn Sie in Ihrer Entwicklungsumgebung ein CORS-Plugin verwenden und Ihre API-Anfragen kurz nach dem Laden fehlschlagen, könnte ein Problem auftreten, bei dem das Plugin mit dem Anfrageverarbeitungsverhalten des Browsers in Konflikt gerät.

Verstehen, wie man ursprungsübergreifende Anfragen verwaltet und Fehler behebt CORS-Fehler in ReactJS ist für einen reibungslosen Entwicklungsprozess unerlässlich. APIs wie die von Swiggy verfügen häufig über Sicherheitsebenen wie CORS, um den Zugriff nicht autorisierter Clients zu kontrollieren. Diese Einschränkungen können zu Fehlern führen, die ordnungsgemäß behoben werden müssen.

In dieser Anleitung untersuchen wir, warum dieser Fehler auftritt, insbesondere nach dem Hinzufügen eines CORS-Plugins in Chrome. Wir besprechen auch Strategien zur Behebung des Problems bei der Arbeit mit der Swiggy-API in Ihrem Reagieren Anwendungen.

Erläutern von Lösungen für CORS-Probleme in React mit der Swiggy API

In der ersten Lösung haben wir eine erstellt Node.js Backend mit Express, um das CORS-Problem beim Abrufen der Restaurantdaten von Swiggys API zu umgehen. Die CORS-Richtlinie verhindert, dass Browser Anfragen an eine andere Domäne stellen, es sei denn, diese Domäne lässt dies zu. Durch die Erstellung eines einfachen Servers können wir als mittlere Schicht zwischen dem Client und der API fungieren, die Daten serverseitig abrufen und an das React-Frontend zurückgeben. Diese Methode vermeidet CORS-Fehler, da die Anfrage vom selben Ursprung stammt wie die Client-App.

Das Express-Backend richtet benutzerdefinierte Header ein, insbesondere die Zugriffskontrolle-Zulassen-Ursprung, was es unserem Kunden ermöglicht, die Ressourcen anzufordern, ohne CORS-Einschränkungen zu unterliegen. Der Abrufaufruf an die Swiggy-API erfolgt serverseitig und die Daten werden im JSON-Format zurückgegeben. Dieser Ansatz wird in Produktionsumgebungen oft als sicherer und leistungsfähiger angesehen, da er API-Schlüssel oder vertrauliche Informationen verbirgt. Darüber hinaus gewährleistet die Verwendung von Try-Catch eine ordnungsgemäße Fehlerbehandlung und zeigt benutzerfreundliche Fehlermeldungen an, wenn die API nicht reagiert.

In der zweiten Lösung ändern wir die Abrufanforderung im clientseitigen React-Code. Bei dieser Methode werden dem Abrufaufruf benutzerdefinierte Header hinzugefügt, um sicherzustellen, dass die Anforderung korrekt formatiert ist, bevor sie die API erreicht. Wir verwenden Reacts useEffect Hook, um den API-Aufruf auszulösen, wenn die Komponente bereitgestellt wird. Die asynchrone Funktion wartet auf die API-Antwort, konvertiert sie in JSON und behandelt Fehler, wenn die Anfrage fehlschlägt. Diese Lösung weist jedoch immer noch CORS-Probleme auf, wenn die API keine Cross-Origin-Anfragen von Browsern direkt zulässt.

Schließlich nutzen wir in der dritten Lösung einen Drittanbieterdienst namens CORS-Anywhere. Dies ist ein Middleware-Dienst, der vorübergehend dabei hilft, CORS-Einschränkungen zu umgehen, indem er die API-Anfrage über ihren Server umleitet. Obwohl diese Lösung in Entwicklungsumgebungen funktionieren kann, wird sie aufgrund von Sicherheitsrisiken und der Abhängigkeit von externen Diensten nicht für die Produktion empfohlen. Es führt auch zu einem Leistungsaufwand, da es dem Datenabrufprozess eine zusätzliche Ebene hinzufügt. Die Verwendung dieser Methode kann in Testphasen praktisch sein, sollte jedoch aus Sicherheitsgründen in der Produktion vermieden werden.

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;

Fehlerbehebung bei CORS-Problemen in API-Anfragen

Einer der zugrunde liegenden Gründe für den Fehler „Failed to fetch“ in einer React-Anwendung, insbesondere bei Verwendung von APIs von Drittanbietern wie Swiggy, ist CORS Einschränkungen (Cross-Origin Resource Sharing). CORS ist eine Sicherheitsfunktion, die verhindert, dass Webanwendungen Anfragen an eine andere Domäne stellen als die, von der sie bereitgestellt wurden. In diesem Fall lehnt die Swiggy-API die Anfrage ab, da sie von einer anderen Domäne (Ihrer React-App) stammt. Dies ist besonders problematisch, wenn Sie Daten von APIs abrufen, die Cross-Origin-Anfragen nicht explizit unterstützen.

Eine häufige Problemumgehung ist die Verwendung von Browsererweiterungen wie der Chrome-Erweiterung „Allow CORS“. Allerdings können solche Erweiterungen zu inkonsistenten Ergebnissen führen. Dies liegt daran, dass sie Einstellungen auf Browserebene manipulieren, die nicht immer ordnungsgemäß mit API-Anfragen synchronisiert werden. Diese Plugins sollten idealerweise nur für die Entwicklung und nicht in Produktionsumgebungen verwendet werden. Für die Produktion wäre ein sichererer und zuverlässigerer Ansatz die Verwendung eines Backend-Proxyservers, der die Daten im Namen Ihrer React-App anfordert, wie in den zuvor bereitgestellten Lösungen gezeigt.

Ein weiterer zu berücksichtigender Aspekt ist der effektive Umgang mit Fehlern. Während CORS-Probleme eine häufige Ursache für Fehler beim Abrufen sind, können auch andere Faktoren wie Netzwerkinstabilität, falsche API-URLs oder Serverausfallzeiten zu diesem Fehler führen. Daher ist es wichtig, es umzusetzen robuste Fehlerbehandlung in Ihrem Code, insbesondere wenn Sie mit APIs von Drittanbietern arbeiten. Ein geeigneter Fehlerbehandlungsmechanismus hilft dabei, das Problem effektiver zu beheben und benutzerfreundliche Meldungen bereitzustellen, wenn etwas schief geht.