ReactJS: após adicionar o plug-in Chrome CORS, falha na busca de rejeição não tratada (TypeError)

Lidando com erros de API no React: desafios do plug-in CORS

Ao trabalhar com APIs em React JS, os desenvolvedores frequentemente encontram vários desafios relacionados à busca de dados, especialmente ao lidar com APIs de terceiros. Um problema comum que surge é o erro “Rejeição não tratada (TypeError): Falha ao buscar”. Esse erro pode ocorrer mesmo ao usar APIs populares como a API de lista de restaurantes do Swiggy, que muitos desenvolvedores usam para aprimorar seus aplicativos da web.

Nesse caso, adicionar uma extensão CORS do Chrome pode parecer uma solução viável para contornar políticas restritivas do navegador. No entanto, pode introduzir novas complicações em vez de resolver o problema. Se você estiver usando um plug-in CORS em seu ambiente de desenvolvimento e suas solicitações de API falharem logo após o carregamento, você poderá estar enfrentando um problema em que o plug-in entra em conflito com o comportamento de tratamento de solicitações do navegador.

Noções básicas sobre como gerenciar solicitações de origem cruzada e solucionar problemas Erros de CORS no ReactJS é essencial para um processo de desenvolvimento tranquilo. APIs como a do Swiggy geralmente possuem camadas de segurança, como o CORS, para controlar o acesso de clientes não autorizados. Essas restrições podem levar a erros que precisam ser resolvidos adequadamente.

Neste guia, exploraremos por que esse erro ocorre, principalmente após adicionar um plugin CORS no Chrome. Também discutiremos estratégias para resolvê-lo ao trabalhar com a API Swiggy em seu Reagir aplicações.

Explicando soluções para problemas de CORS em React com API Swiggy

Na primeira solução, criamos um Node.js back-end usando Express para contornar o problema de CORS ao buscar os dados do restaurante da API do Swiggy. A política CORS impede que os navegadores façam solicitações para um domínio diferente, a menos que esse domínio permita. Ao criar um servidor simples, podemos atuar como uma camada intermediária entre o cliente e a API, buscando os dados do lado do servidor e retornando-os ao front-end do React. Este método evita erros de CORS, pois a solicitação vem da mesma origem do aplicativo cliente.

O back-end Express configura cabeçalhos personalizados, especialmente o Acesso-Controle-Permitir-Origem, o que permite ao nosso cliente solicitar os recursos sem enfrentar restrições de CORS. A chamada de busca para a API do Swiggy é feita no lado do servidor e os dados são retornados no formato JSON. Essa abordagem costuma ser considerada mais segura e de melhor desempenho em ambientes de produção, pois oculta chaves de API ou informações confidenciais. Além disso, o uso de try-catch garante o tratamento adequado de erros, exibindo mensagens de erro fáceis de usar caso a API não responda.

Na segunda solução, modificamos a solicitação de busca no código React do lado do cliente. Este método envolve adicionar cabeçalhos personalizados na chamada de busca, garantindo que a solicitação seja formatada corretamente antes de chegar à API. Usamos React useEfeito gancho para acionar a chamada da API quando o componente for montado. A função assíncrona aguarda a resposta da API, converte-a em JSON e trata de erros se a solicitação falhar. No entanto, esta solução ainda enfrenta problemas de CORS se a API não permitir solicitações de origem cruzada diretamente dos navegadores.

Por fim, na terceira solução, utilizamos um serviço de terceiros chamado CORS-Anywhere. Este é um serviço de middleware que ajuda temporariamente a contornar as restrições do CORS, redirecionando a solicitação da API por meio do servidor. Embora esta solução possa funcionar em ambientes de desenvolvimento, não é recomendada para produção devido a riscos de segurança e à dependência de serviços externos. Ele também introduz sobrecarga de desempenho, pois adiciona uma camada adicional ao processo de busca de dados. Usar este método pode ser conveniente durante as fases de teste, mas deve ser evitado na produção por razões de segurança.

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;

Solução de problemas de CORS em solicitações de API

Uma das razões subjacentes para o erro "Falha ao buscar" em um aplicativo React, especialmente ao usar APIs de terceiros como Swiggy, é CORS (Compartilhamento de recursos entre origens). CORS é um recurso de segurança que impede que aplicativos da web façam solicitações para um domínio diferente daquele a partir do qual foram atendidos. Nesse caso, a API Swiggy rejeita a solicitação porque ela se origina de um domínio diferente (seu aplicativo React). Isso é particularmente problemático quando você busca dados de APIs que não oferecem suporte explícito a solicitações de origem cruzada.

Uma solução alternativa comum é usar extensões de navegador como a extensão "Permitir CORS" do Chrome. No entanto, tais extensões podem levar a resultados inconsistentes. Isso ocorre porque eles manipulam configurações no nível do navegador que nem sempre sincronizam corretamente com as solicitações de API. Idealmente, esses plug-ins devem ser usados ​​apenas para desenvolvimento e não em ambientes de produção. Para produção, uma abordagem mais segura e confiável seria usar um servidor proxy backend que solicita os dados em nome do seu aplicativo React, conforme visto nas soluções fornecidas anteriormente.

Outro aspecto a considerar é lidar com erros de forma eficaz. Embora os problemas de CORS sejam uma causa comum de erros de “Falha ao buscar”, outros fatores como instabilidade da rede, URLs de API incorretos ou tempo de inatividade do servidor também podem resultar nesse erro. Portanto, é importante implementar tratamento robusto de erros no seu código, especialmente ao trabalhar com APIs de terceiros. Um mecanismo adequado de tratamento de erros ajudará a depurar o problema de forma mais eficaz e fornecerá mensagens fáceis de usar quando algo der errado.