ReactJS: dopo aver aggiunto il plug-in CORS di Chrome, impossibile recuperare il rifiuto non gestito (TypeError)

Gestione degli errori API in React: sfide del plug-in CORS

Quando si lavora con le API in ReactJS, gli sviluppatori spesso incontrano varie sfide legate al recupero dei dati, soprattutto quando hanno a che fare con API di terze parti. Un problema comune che si verifica è l'errore "Rifiuto non gestito (TypeError): impossibile recuperare". Questo errore può verificarsi anche quando si utilizzano API popolari come l'API dell'elenco dei ristoranti di Swiggy, che molti sviluppatori utilizzano per migliorare le proprie applicazioni web.

In questo caso, l'aggiunta di un'estensione CORS Chrome potrebbe sembrare una soluzione praticabile per aggirare le policy restrittive del browser. Tuttavia, potrebbe introdurre nuove complicazioni invece di risolvere il problema. Se utilizzi un plug-in CORS nel tuo ambiente di sviluppo e le tue richieste API falliscono subito dopo il caricamento, potresti riscontrare un problema in cui il plug-in è in conflitto con il comportamento di gestione delle richieste del browser.

Comprendere come gestire le richieste multiorigine e risolvere i problemi Errori CORS in ReactJS è essenziale per un processo di sviluppo regolare. Le API come quella di Swiggy spesso dispongono di livelli di sicurezza, come CORS, per controllare l'accesso da parte di client non autorizzati. Queste restrizioni possono portare a errori che devono essere risolti adeguatamente.

In questa guida esploreremo il motivo per cui si verifica questo errore, in particolare dopo aver aggiunto un plug-in CORS in Chrome. Discuteremo anche le strategie per risolverlo mentre lavori con l'API Swiggy nel tuo Reagire applicazioni.

Spiegare le soluzioni per i problemi CORS in React con l'API Swiggy

Nella prima soluzione, abbiamo creato un file Node.js backend utilizzando Express per aggirare il problema CORS durante il recupero dei dati del ristorante dall'API di Swiggy. La politica CORS impedisce ai browser di effettuare richieste a un dominio diverso a meno che tale dominio non lo consenta. Creando un semplice server, possiamo agire come strato intermedio tra il client e l'API, recuperando i dati lato server e restituendoli al front-end React. Questo metodo evita errori CORS poiché la richiesta proviene dalla stessa origine dell'app client.

Il backend Express imposta intestazioni personalizzate, in particolare il file Accesso-Controllo-Consenti-Origine, che consente al nostro cliente di richiedere le risorse senza affrontare le restrizioni CORS. La chiamata di recupero all'API di Swiggy viene effettuata lato server e i dati vengono restituiti in formato JSON. Questo approccio è spesso considerato più sicuro e performante negli ambienti di produzione poiché nasconde chiavi API o informazioni sensibili. Inoltre, l'uso di try-catch garantisce una corretta gestione degli errori, visualizzando messaggi di errore intuitivi se l'API non risponde.

Nella seconda soluzione, modifichiamo la richiesta di recupero sul codice React lato client. Questo metodo prevede l'aggiunta di intestazioni personalizzate nella chiamata di recupero, garantendo che la richiesta sia formattata correttamente prima di raggiungere l'API. Usiamo React useEffect hook per attivare la chiamata API quando il componente viene montato. La funzione asincrona attende la risposta API, la converte in JSON e gestisce gli errori se la richiesta fallisce. Tuttavia, questa soluzione deve ancora affrontare problemi CORS se l'API non consente richieste multiorigine direttamente dai browser.

Nella terza soluzione, infine, utilizziamo un servizio di terze parti chiamato CORS-Anywhere. Si tratta di un servizio middleware che aiuta temporaneamente a bypassare le restrizioni CORS reindirizzando la richiesta API attraverso il loro server. Sebbene questa soluzione possa funzionare negli ambienti di sviluppo, non è consigliata per la produzione a causa dei rischi per la sicurezza e della dipendenza da servizi esterni. Introduce inoltre un sovraccarico delle prestazioni poiché aggiunge un ulteriore livello al processo di recupero dei dati. L'utilizzo di questo metodo può essere conveniente durante le fasi di testing ma dovrebbe essere evitato in produzione per ragioni di sicurezza.

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;

Risoluzione dei problemi CORS nelle richieste API

Uno dei motivi alla base dell'errore "Impossibile recuperare" in un'applicazione React, soprattutto quando si utilizzano API di terze parti come Swiggy, è CORSO (Condivisione di risorse tra origini). CORS è una funzionalità di sicurezza che impedisce alle applicazioni Web di effettuare richieste a un dominio diverso da quello da cui sono state servite. In questo caso, l'API Swiggy rifiuta la richiesta perché proviene da un dominio diverso (la tua app React). Ciò è particolarmente problematico quando si recuperano dati da API che non supportano esplicitamente richieste multiorigine.

Una soluzione comune è utilizzare estensioni del browser come l'estensione Chrome "Consenti CORS". Tuttavia, tali estensioni possono portare a risultati incoerenti. Questo perché manipolano le impostazioni a livello di browser che non sempre si sincronizzano correttamente con le richieste API. Questi plugin dovrebbero idealmente essere utilizzati solo per lo sviluppo e non in ambienti di produzione. Per la produzione, un approccio più sicuro e affidabile sarebbe utilizzare un server proxy backend che richiede i dati per conto della tua app React, come visto nelle soluzioni fornite in precedenza.

Un altro aspetto da considerare è la gestione efficace degli errori. Sebbene i problemi CORS siano una causa comune di errori "Impossibile recuperare", anche altri fattori come l'instabilità della rete, URL API errati o tempi di inattività del server potrebbero causare questo errore. Pertanto, è importante implementarlo gestione efficace degli errori nel tuo codice, soprattutto quando lavori con API di terze parti. Un adeguato meccanismo di gestione degli errori aiuterà a risolvere il problema in modo più efficace e fornirà messaggi intuitivi quando qualcosa va storto.