ReactJS: después de agregar el complemento Chrome CORS, no se pudo recuperar el rechazo no controlado (TypeError)

Manejo de errores de API en React: desafíos del complemento CORS

Al trabajar con API en reaccionarjs, los desarrolladores a menudo enfrentan varios desafíos relacionados con la obtención de datos, especialmente cuando trabajan con API de terceros. Un problema común que surge es el error "Rechazo no controlado (TypeError): No se pudo recuperar". Este error puede ocurrir incluso cuando se utilizan API populares como la API de lista de restaurantes de Swiggy, que muchos desarrolladores utilizan para mejorar sus aplicaciones web.

En este caso, agregar una extensión CORS Chrome puede parecer una solución viable para evitar las políticas restrictivas del navegador. Sin embargo, puede introducir nuevas complicaciones en lugar de resolver el problema. Si está utilizando un complemento CORS en su entorno de desarrollo y sus solicitudes de API fallan poco después de la carga, podría encontrarse con un problema en el que el complemento entra en conflicto con el comportamiento de manejo de solicitudes del navegador.

Comprender cómo gestionar solicitudes de origen cruzado y solucionar problemas Errores CORS en ReactJS es esencial para un proceso de desarrollo fluido. Las API como las de Swiggy a menudo tienen capas de seguridad, como CORS, para controlar el acceso de clientes no autorizados. Estas restricciones pueden provocar errores que deben abordarse adecuadamente.

En esta guía, exploraremos por qué ocurre este error, particularmente después de agregar un complemento CORS en Chrome. También discutiremos estrategias para resolverlo mientras trabajamos con la API de Swiggy en su Reaccionar aplicaciones.

Explicación de soluciones para problemas de CORS en React con Swiggy API

En la primera solución, creamos un Nodo.js backend usando Express para evitar el problema de CORS al obtener los datos del restaurante de la API de Swiggy. La política CORS impide que los navegadores realicen solicitudes a un dominio diferente a menos que ese dominio lo permita. Al crear un servidor simple, podemos actuar como una capa intermedia entre el cliente y la API, recuperando los datos del lado del servidor y devolviéndolos al front-end de React. Este método evita errores de CORS ya que la solicitud proviene del mismo origen que la aplicación cliente.

El backend de Express configura encabezados personalizados, particularmente el Control-de-acceso-permitir-origen, lo que permite a nuestro cliente solicitar los recursos sin enfrentar restricciones de CORS. La llamada de recuperación a la API de Swiggy se realiza en el lado del servidor y los datos se devuelven en formato JSON. Este enfoque suele considerarse más seguro y eficaz en entornos de producción, ya que oculta claves API o información confidencial. Además, el uso de try-catch garantiza un manejo adecuado de los errores y muestra mensajes de error fáciles de usar si la API no responde.

En la segunda solución, modificamos la solicitud de recuperación en el código React del lado del cliente. Este método implica agregar encabezados personalizados en la llamada de recuperación, lo que garantiza que la solicitud tenga el formato correcto antes de llegar a la API. Usamos React usoEfecto gancho para activar la llamada API cuando se monta el componente. La función asíncrona espera la respuesta de la API, la convierte a JSON y maneja los errores si la solicitud falla. Sin embargo, esta solución aún enfrenta problemas de CORS si la API no permite solicitudes de origen cruzado directamente desde los navegadores.

Finalmente, en la tercera solución, utilizamos un servicio de terceros llamado CORS-Anywhere. Este es un servicio de middleware que ayuda temporalmente a eludir las restricciones de CORS al redirigir la solicitud de API a través de su servidor. Si bien esta solución puede funcionar en entornos de desarrollo, no se recomienda para producción debido a los riesgos de seguridad y la dependencia de servicios externos. También introduce una sobrecarga de rendimiento, ya que agrega una capa adicional al proceso de obtención de datos. El uso de este método puede resultar conveniente durante las fases de prueba, pero debe evitarse en producción por razones de seguridad.

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;

Solución de problemas de CORS en solicitudes de API

Una de las razones subyacentes del error "Error al recuperar" en una aplicación React, especialmente cuando se utilizan API de terceros como Swiggy, es CORS (Compartición de recursos entre orígenes). CORS es una característica de seguridad que impide que las aplicaciones web realicen solicitudes a un dominio diferente a aquel desde el que fueron atendidas. En este caso, la API de Swiggy rechaza la solicitud porque se origina en un dominio diferente (su aplicación React). Esto es particularmente problemático cuando se obtienen datos de API que no admiten explícitamente solicitudes de origen cruzado.

Una solución alternativa común es utilizar extensiones del navegador como la extensión de Chrome "Permitir CORS". Sin embargo, dichas extensiones pueden dar lugar a resultados inconsistentes. Esto se debe a que manipulan configuraciones a nivel del navegador que no siempre se sincronizan correctamente con las solicitudes de API. Lo ideal es que estos complementos se utilicen solo para desarrollo y no en entornos de producción. Para la producción, un enfoque más seguro y confiable sería utilizar un servidor proxy backend que solicite los datos en nombre de su aplicación React, como se vio en las soluciones proporcionadas anteriormente.

Otro aspecto a considerar es el manejo eficaz de los errores. Si bien los problemas de CORS son una causa común de errores de "Error al recuperar", otros factores como la inestabilidad de la red, las URL de API incorrectas o el tiempo de inactividad del servidor también podrían provocar este error. Por lo tanto, es importante implementar manejo robusto de errores en su código, especialmente cuando trabaja con API de terceros. Un mecanismo adecuado de manejo de errores ayudará a depurar el problema de manera más efectiva y brindará mensajes fáciles de usar cuando algo salga mal.