ReactJS: Nakon dodavanja Chrome CORS dodatka, neobrađeno odbijanje (TypeError) nije uspjelo dohvatiti

Rukovanje API pogreškama u Reactu: Izazovi CORS dodataka

Kada radite s API-jima u ReactJS, programeri se često susreću s raznim izazovima povezanim s dohvaćanjem podataka, osobito kada rade s API-jima trećih strana. Jedan uobičajeni problem koji se javlja je pogreška "Neobrađeno odbijanje (TypeError): dohvaćanje nije uspjelo". Ova se pogreška može pojaviti čak i kada koristite popularne API-je kao što je Swiggy's Restaurant List API, koji mnogi programeri koriste za poboljšanje svojih web aplikacija.

U ovom slučaju, dodavanje CORS proširenja za Chrome može izgledati kao održivo rješenje za zaobilaženje restriktivnih pravila preglednika. Međutim, to može dovesti do novih komplikacija umjesto da riješi problem. Ako koristite dodatak CORS u svom razvojnom okruženju, a vaši API zahtjevi ne uspiju ubrzo nakon učitavanja, mogli biste naići na problem u kojem je dodatak u sukobu s ponašanjem preglednika pri rukovanju zahtjevima.

Razumijevanje kako upravljati zahtjevima iz drugog izvora i rješavati probleme CORS pogreške u ReactJS ključan je za nesmetan proces razvoja. API-ji poput Swiggyjevog često imaju sigurnosne slojeve, poput CORS-a, koji kontroliraju pristup neovlaštenih klijenata. Ova ograničenja mogu dovesti do pogrešaka koje treba ispravno riješiti.

U ovom ćemo vodiču istražiti zašto se ova pogreška pojavljuje, osobito nakon dodavanja CORS dodatka u Chrome. Također ćemo razgovarati o strategijama za njegovo rješavanje tijekom rada sa Swiggy API-jem u vašem Reagiraj aplikacije.

Objašnjavanje rješenja za CORS probleme u Reactu sa Swiggy API-jem

U prvom rješenju stvorili smo a Node.js pozadina koja koristi Express za zaobilaženje problema s CORS-om prilikom dohvaćanja podataka restorana iz Swiggyjevog API-ja. Pravilo CORS sprječava preglednike da postavljaju zahtjeve drugoj domeni osim ako ta domena to ne dopušta. Stvaranjem jednostavnog poslužitelja možemo djelovati kao srednji sloj između klijenta i API-ja, dohvaćajući podatke na strani poslužitelja i vraćajući ih u React front-end. Ova metoda izbjegava pogreške CORS-a jer zahtjev dolazi iz istog izvora kao i klijentska aplikacija.

Express backend postavlja prilagođena zaglavlja, posebno Access-Control-Allow-Origin, što našem klijentu omogućuje da zatraži resurse bez suočavanja s ograničenjima CORS-a. Poziv za dohvaćanje Swiggyjevom API-ju vrši se na strani poslužitelja, a podaci se vraćaju u JSON formatu. Ovaj se pristup često smatra sigurnijim i učinkovitijim u produkcijskim okruženjima budući da skriva API ključeve ili osjetljive informacije. Nadalje, korištenje try-catch-a osigurava ispravno rukovanje pogreškama, prikazujući poruke o pogrešci koje su jednostavne za korištenje ako API ne uspije odgovoriti.

U drugom rješenju mijenjamo zahtjev za dohvaćanje na React kodu na strani klijenta. Ova metoda uključuje dodavanje prilagođenih zaglavlja u poziv za dohvaćanje, osiguravajući da je zahtjev ispravno formatiran prije nego što stigne do API-ja. Koristimo Reactov useEffect kuka za pokretanje API poziva kada se komponenta montira. Funkcija async čeka API odgovor, pretvara ga u JSON i obrađuje pogreške ako zahtjev ne uspije. Međutim, ovo se rješenje i dalje suočava s problemima s CORS-om ako API ne dopušta zahtjeve s različitim izvorima izravno iz preglednika.

Konačno, u trećem rješenju koristimo uslugu treće strane pod nazivom CORS-Anywhere. Ovo je međuprogramska usluga koja privremeno pomaže u zaobilaženju ograničenja CORS-a preusmjeravanjem API zahtjeva kroz njihov poslužitelj. Iako ovo rješenje može raditi u razvojnim okruženjima, ne preporučuje se za proizvodnju zbog sigurnosnih rizika i ovisnosti o vanjskim uslugama. Također uvodi opterećenje performansi jer dodaje dodatni sloj procesu dohvaćanja podataka. Korištenje ove metode može biti zgodno tijekom faza testiranja, ali treba je izbjegavati u proizvodnji iz sigurnosnih razloga.

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;

Rješavanje problema s CORS-om u API zahtjevima

Jedan od temeljnih razloga za grešku "Failed to fetch" u aplikaciji React, posebno kada se koriste API-ji trećih strana kao što je Swiggy, je CORS (Cross-Origin Resource Sharing) ograničenja. CORS je sigurnosna značajka koja web-aplikacijama ograničava upućivanje zahtjeva domeni različitoj od one s koje su poslani. U ovom slučaju, Swiggy API odbija zahtjev jer potječe s druge domene (vaša aplikacija React). To je osobito problematično kada dohvaćate podatke iz API-ja koji eksplicitno ne podržavaju zahtjeve iz drugog izvora.

Uobičajeno zaobilazno rješenje je korištenje proširenja preglednika kao što je Chromeovo proširenje "Allow CORS". Međutim, takva proširenja mogu dovesti do nedosljednih rezultata. To je zato što manipuliraju postavkama na razini preglednika koje se ne sinkroniziraju uvijek pravilno s API zahtjevima. Idealno bi bilo da se ti dodaci koriste samo za razvoj, a ne u proizvodnim okruženjima. Za proizvodnju, sigurniji i pouzdaniji pristup bio bi korištenje pozadinskog proxy poslužitelja koji zahtijeva podatke u ime vaše React aplikacije, kao što se vidi u rješenjima koja su ranije navedena.

Još jedan aspekt koji treba uzeti u obzir je učinkovito rukovanje pogreškama. Iako su problemi s CORS-om čest uzrok pogreške "Dohvaćanje nije uspjelo", drugi čimbenici poput nestabilnosti mreže, netočnih URL-ova API-ja ili prekida rada poslužitelja također mogu rezultirati ovom pogreškom. Stoga je važno implementirati robusno rukovanje greškama u vašem kodu, posebno kada radite s API-jima trećih strana. Odgovarajući mehanizam za rukovanje pogreškama pomoći će učinkovitijem otklanjanju pogrešaka i pružiti korisniku prilagođene poruke kada nešto pođe po zlu.