ReactJS: després d'afegir el connector Chrome CORS, no s'ha pogut recuperar el rebuig no gestionat (TypeError)

Gestió d'errors de l'API a React: reptes del connector CORS

Quan es treballa amb API a ReactJS, els desenvolupadors sovint es troben amb diversos reptes relacionats amb l'obtenció de dades, especialment quan tracten amb API de tercers. Un problema comú que sorgeix és l'error "Rebuig no gestionat (TypeError): no s'ha pogut obtenir". Aquest error es pot produir fins i tot quan s'utilitzen API populars com l'API de llista de restaurants de Swiggy, que molts desenvolupadors utilitzen per millorar les seves aplicacions web.

En aquest cas, afegir una extensió CORS Chrome pot semblar una solució viable per evitar les polítiques restrictives del navegador. Tanmateix, pot introduir noves complicacions en lloc de resoldre el problema. Si utilitzeu un connector CORS al vostre entorn de desenvolupament i les vostres sol·licituds d'API fallen poc després de carregar-se, és possible que tingueu un problema en què el connector entre en conflicte amb el comportament de gestió de sol·licituds del navegador.

Comprendre com gestionar les sol·licituds d'origen creuat i resoldre problemes Errors CORS a ReactJS és essencial per a un procés de desenvolupament fluid. Les API com la de Swiggy solen tenir capes de seguretat, com ara CORS, per controlar l'accés de clients no autoritzats. Aquestes restriccions poden provocar errors que s'han de solucionar correctament.

En aquesta guia, explorarem per què es produeix aquest error, sobretot després d'afegir un connector CORS a Chrome. També parlarem d'estratègies per resoldre'l mentre treballem amb l'API Swiggy al vostre Reacciona aplicacions.

Explicació de solucions per a problemes de CORS a React with Swiggy API

En la primera solució, vam crear un Node.js backend utilitzant Express per evitar el problema CORS quan obteniu les dades del restaurant de l'API de Swiggy. La política CORS impedeix que els navegadors facin sol·licituds a un domini diferent tret que aquest domini ho permeti. En crear un servidor senzill, podem actuar com a capa mitjana entre el client i l'API, obtenint el costat del servidor de dades i retornant-lo al front-end de React. Aquest mètode evita errors CORS ja que la sol·licitud prové del mateix origen que l'aplicació client.

El backend Express configura capçaleres personalitzades, especialment Accés-Control-Permetre-Origen, que permet al nostre client sol·licitar els recursos sense enfrontar-se a restriccions CORS. La crida de recuperació a l'API de Swiggy es fa al costat del servidor i les dades es retornen en format JSON. Sovint, aquest enfocament es considera més segur i eficient en entorns de producció, ja que amaga claus de l'API o informació sensible. A més, l'ús de try-catch garanteix un tractament adequat dels errors, mostrant missatges d'error fàcils d'utilitzar si l'API no respon.

A la segona solució, modifiquem la sol·licitud de recuperació al codi React del costat del client. Aquest mètode implica afegir capçaleres personalitzades a la trucada de recuperació, assegurant-se que la sol·licitud té el format correcte abans d'arribar a l'API. Utilitzem React's useEffect ganxo per activar la crida de l'API quan es munta el component. La funció asíncrona espera la resposta de l'API, la converteix a JSON i gestiona els errors si la sol·licitud falla. Tanmateix, aquesta solució encara té problemes de CORS si l'API no permet sol·licituds d'origen creuat dels navegadors directament.

Finalment, a la tercera solució, utilitzem un servei de tercers anomenat CORS-Anywhere. Aquest és un servei de programari intermedi que ajuda temporalment a eludir les restriccions CORS mitjançant el reencaminament de la sol·licitud de l'API a través del seu servidor. Tot i que aquesta solució pot funcionar en entorns de desenvolupament, no es recomana per a la producció a causa dels riscos de seguretat i la dependència de serveis externs. També introdueix una sobrecàrrega de rendiment, ja que afegeix una capa addicional al procés d'obtenció de dades. L'ús d'aquest mètode pot ser convenient durant les fases de prova, però s'ha d'evitar en producció per motius de seguretat.

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;

Resolució de problemes de CORS a les sol·licituds d'API

Un dels motius subjacents de l'error "No s'ha pogut obtenir" en una aplicació React, especialment quan s'utilitzen API de tercers com Swiggy, és CORS Restriccions (Compartició de recursos entre orígens). CORS és una funció de seguretat que restringeix que les aplicacions web facin sol·licituds a un domini diferent del que s'han atès. En aquest cas, l'API de Swiggy rebutja la sol·licitud perquè prové d'un domini diferent (la vostra aplicació React). Això és especialment problemàtic quan obteniu dades d'API que no admeten explícitament sol·licituds d'origen creuat.

Una solució alternativa és utilitzar extensions del navegador com l'extensió de Chrome "Permet CORS". Tanmateix, aquestes extensions poden donar lloc a resultats inconsistents. Això es deu al fet que manipulen la configuració del navegador que no sempre es sincronitza correctament amb les sol·licituds de l'API. Idealment, aquests connectors s'han d'utilitzar només per al desenvolupament i no en entorns de producció. Per a la producció, un enfocament més segur i fiable seria utilitzar un servidor intermediari de fons que sol·liciti les dades en nom de la vostra aplicació React, tal com s'ha vist a les solucions proporcionades anteriorment.

Un altre aspecte a tenir en compte és la gestió eficaç dels errors. Tot i que els problemes CORS són una causa habitual dels errors "No s'ha pogut obtenir", altres factors com la inestabilitat de la xarxa, els URL incorrectes de l'API o el temps d'inactivitat del servidor també poden provocar aquest error. Per tant, és important implementar-lo maneig d'errors robust al vostre codi, especialment quan treballeu amb API de tercers. Un mecanisme de gestió d'errors adequat ajudarà a depurar el problema de manera més eficaç i proporcionarà missatges fàcils d'utilitzar quan alguna cosa va malament.