ReactJS : après l'ajout du plugin Chrome CORS, le rejet non géré (TypeError) n'a pas pu être récupéré

Gestion des erreurs d'API dans React : défis du plugin CORS

Lorsque vous travaillez avec des API dans RéagirJS, les développeurs sont souvent confrontés à divers défis liés à la récupération de données, notamment lorsqu'ils traitent avec des API tierces. Un problème courant qui survient est l’erreur « Rejet non géré (TypeError) : échec de la récupération ». Cette erreur peut se produire même lors de l’utilisation d’API populaires telles que l’API de liste de restaurants de Swiggy, que de nombreux développeurs utilisent pour améliorer leurs applications Web.

Dans ce cas, l’ajout d’une extension CORS Chrome peut sembler une solution viable pour contourner les politiques restrictives du navigateur. Cependant, cela pourrait introduire de nouvelles complications au lieu de résoudre le problème. Si vous utilisez un plugin CORS dans votre environnement de développement et que vos requêtes API échouent peu de temps après le chargement, vous pourriez rencontrer un problème où le plugin entre en conflit avec le comportement de gestion des requêtes du navigateur.

Comprendre comment gérer les requêtes cross-origin et dépanner Erreurs CORS dans ReactJS est essentiel pour un processus de développement fluide. Les API comme celle de Swiggy disposent souvent de couches de sécurité, telles que CORS, pour contrôler l'accès des clients non autorisés. Ces restrictions peuvent conduire à des erreurs qui doivent être corrigées correctement.

Dans ce guide, nous explorerons pourquoi cette erreur se produit, en particulier après l'ajout d'un plugin CORS dans Chrome. Nous discuterons également des stratégies pour le résoudre tout en travaillant avec l'API Swiggy dans votre Réagir candidatures.

Expliquer les solutions aux problèmes CORS dans React avec l'API Swiggy

Dans la première solution, nous avons créé un Noeud.js backend utilisant Express pour contourner le problème CORS lors de la récupération des données du restaurant à partir de l'API de Swiggy. La politique CORS empêche les navigateurs d'effectuer des requêtes vers un domaine différent à moins que ce domaine ne le permette. En créant un serveur simple, nous pouvons agir comme une couche intermédiaire entre le client et l'API, en récupérant les données côté serveur et en les renvoyant au front-end React. Cette méthode évite les erreurs CORS puisque la requête provient de la même origine que l'application cliente.

Le backend Express configure des en-têtes personnalisés, en particulier le Contrôle d'accès-Autoriser-Origine, ce qui permet à notre client de demander les ressources sans faire face aux restrictions CORS. L'appel d'extraction à l'API de Swiggy est effectué côté serveur et les données sont renvoyées au format JSON. Cette approche est souvent considérée comme plus sécurisée et plus performante dans les environnements de production car elle masque les clés API ou les informations sensibles. De plus, l'utilisation de try-catch garantit une gestion appropriée des erreurs, affichant des messages d'erreur conviviaux si l'API ne répond pas.

Dans la deuxième solution, nous modifions la requête de récupération sur le code React côté client. Cette méthode implique l'ajout d'en-têtes personnalisés dans l'appel fetch, garantissant que la requête est correctement formatée avant d'atteindre l'API. Nous utilisons React utiliserEffet hook pour déclencher l’appel d’API lors du montage du composant. La fonction asynchrone attend la réponse de l'API, la convertit en JSON et gère les erreurs si la requête échoue. Cependant, cette solution est toujours confrontée à des problèmes CORS si l'API n'autorise pas directement les requêtes d'origine croisée provenant des navigateurs.

Enfin, dans la troisième solution, nous utilisons un service tiers appelé CORS-Anywhere. Il s'agit d'un service middleware qui permet de contourner temporairement les restrictions CORS en redirigeant la requête API via leur serveur. Bien que cette solution puisse fonctionner dans des environnements de développement, elle n'est pas recommandée pour la production en raison des risques de sécurité et de la dépendance à l'égard de services externes. Il introduit également une surcharge de performances car il ajoute une couche supplémentaire au processus de récupération de données. L’utilisation de cette méthode peut être pratique lors des phases de tests mais doit être évitée en production pour des raisons de sécurité.

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;

Dépannage des problèmes CORS dans les requêtes API

L'une des raisons sous-jacentes de l'erreur « Échec de la récupération » dans une application React, en particulier lors de l'utilisation d'API tierces comme Swiggy, est CORS (Partage de ressources entre origines croisées). CORS est une fonctionnalité de sécurité qui empêche les applications Web d'effectuer des requêtes vers un domaine différent de celui à partir duquel elles ont été servies. Dans ce cas, l'API Swiggy rejette la demande car elle provient d'un domaine différent (votre application React). Cela est particulièrement problématique lorsque vous récupérez des données à partir d’API qui ne prennent pas explicitement en charge les requêtes d’origine croisée.

Une solution de contournement courante consiste à utiliser des extensions de navigateur telles que l'extension Chrome « Autoriser CORS ». Cependant, de telles extensions peuvent conduire à des résultats incohérents. En effet, ils manipulent les paramètres au niveau du navigateur qui ne se synchronisent pas toujours correctement avec les requêtes API. Ces plugins doivent idéalement être utilisés uniquement pour le développement et non dans des environnements de production. Pour la production, une approche plus sûre et plus fiable consisterait à utiliser un serveur proxy back-end qui demande les données au nom de votre application React, comme le montrent les solutions fournies précédemment.

Un autre aspect à considérer est la gestion efficace des erreurs. Bien que les problèmes CORS soient une cause fréquente d'erreurs « Échec de la récupération », d'autres facteurs tels que l'instabilité du réseau, des URL d'API incorrectes ou des temps d'arrêt du serveur peuvent également entraîner cette erreur. Il est donc important de mettre en œuvre gestion robuste des erreurs dans votre code, en particulier lorsque vous travaillez avec des API tierces. Un mécanisme de gestion des erreurs approprié aidera à déboguer le problème plus efficacement et fournira des messages conviviaux en cas de problème.