ReactJS: Po dodaniu wtyczki Chrome CORS, pobranie nieobsługiwanego odrzucenia (TypeError) nie powiodło się

Obsługa błędów API w React: wyzwania dotyczące wtyczek CORS

Podczas pracy z interfejsami API w ReagujJS, programiści często napotykają różne wyzwania związane z pobieraniem danych, szczególnie w przypadku interfejsów API innych firm. Częstym problemem, który się pojawia, jest błąd „Nieobsługiwane odrzucenie (TypeError): nie udało się pobrać”. Ten błąd może wystąpić nawet podczas korzystania z popularnych interfejsów API, takich jak interfejs API listy restauracji Swiggy, którego wielu programistów używa do ulepszania swoich aplikacji internetowych.

W takim przypadku dodanie rozszerzenia CORS do Chrome może wydawać się realnym rozwiązaniem pozwalającym ominąć restrykcyjne zasady przeglądarki. Może jednak zamiast rozwiązać problem, wprowadzić nowe komplikacje. Jeśli używasz wtyczki CORS w swoim środowisku programistycznym, a żądania API kończą się niepowodzeniem wkrótce po załadowaniu, możesz napotkać problem polegający na tym, że wtyczka powoduje konflikt z zachowaniem przeglądarki w zakresie obsługi żądań.

Zrozumienie, jak zarządzać żądaniami między źródłami i rozwiązywać problemy Błędy CORS-a w ReactJS jest niezbędne dla płynnego procesu programowania. Interfejsy API, takie jak Swiggy, często mają warstwy zabezpieczeń, takie jak CORS, które kontrolują dostęp nieautoryzowanych klientów. Ograniczenia te mogą prowadzić do błędów, którymi należy się odpowiednio zająć.

W tym przewodniku sprawdzimy, dlaczego występuje ten błąd, szczególnie po dodaniu wtyczki CORS w przeglądarce Chrome. Omówimy także strategie rozwiązania tego problemu podczas pracy z interfejsem API Swiggy w Twoim Zareagować aplikacje.

Wyjaśnianie rozwiązań problemów CORS w React with Swiggy API

W pierwszym rozwiązaniu utworzyliśmy plik Node.js backend wykorzystujący Express do ominięcia problemu CORS podczas pobierania danych restauracji z API Swiggy. Polityka CORS uniemożliwia przeglądarkom wysyłanie żądań do innej domeny, chyba że domena na to pozwala. Tworząc prosty serwer, możemy pełnić rolę warstwy środkowej pomiędzy klientem a API, pobierając dane po stronie serwera i zwracając je do frontonu React. Ta metoda pozwala uniknąć błędów CORS, ponieważ żądanie pochodzi z tego samego źródła co aplikacja kliencka.

Backend Express konfiguruje niestandardowe nagłówki, w szczególności Kontrola dostępu-Zezwól na pochodzenie, co pozwala naszemu klientowi zażądać zasobów bez narażania się na ograniczenia CORS. Wywołanie pobierania do API Swiggy jest wykonywane po stronie serwera, a dane są zwracane w formacie JSON. Takie podejście jest często uważane za bezpieczniejsze i wydajniejsze w środowiskach produkcyjnych, ponieważ ukrywa klucze API lub poufne informacje. Co więcej, użycie try-catch zapewnia właściwą obsługę błędów, wyświetlając przyjazne dla użytkownika komunikaty o błędach, jeśli API nie odpowiada.

W drugim rozwiązaniu modyfikujemy żądanie pobrania w kodzie React po stronie klienta. Ta metoda polega na dodaniu niestandardowych nagłówków w wywołaniu pobierania, co gwarantuje, że żądanie zostanie poprawnie sformatowane przed dotarciem do interfejsu API. Używamy Reacta użyjEfektu hook, aby wywołać wywołanie API podczas montowania komponentu. Funkcja asynchroniczna czeka na odpowiedź API, konwertuje ją do formatu JSON i obsługuje błędy w przypadku niepowodzenia żądania. Jednak to rozwiązanie nadal napotyka problemy z CORS, jeśli interfejs API nie zezwala bezpośrednio na żądania między źródłami z przeglądarek.

Wreszcie w trzecim rozwiązaniu korzystamy z usługi zewnętrznej o nazwie CORS-Anywhere. Jest to usługa oprogramowania pośredniego, która tymczasowo pomaga ominąć ograniczenia CORS, przekierowując żądanie API przez serwer. Chociaż to rozwiązanie może działać w środowiskach programistycznych, nie jest zalecane do zastosowań produkcyjnych ze względu na ryzyko bezpieczeństwa i zależność od usług zewnętrznych. Wprowadza również narzut wydajności, ponieważ dodaje dodatkową warstwę do procesu pobierania danych. Korzystanie z tej metody może być wygodne w fazie testowania, ale należy go unikać w środowisku produkcyjnym ze względów bezpieczeństwa.

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;

Rozwiązywanie problemów z CORS w żądaniach API

Jedną z podstawowych przyczyn błędu „Nie udało się pobrać” w aplikacji React, szczególnie podczas korzystania z interfejsów API innych firm, takich jak Swiggy, jest CORS (Udostępnianie zasobów między źródłami). CORS to funkcja bezpieczeństwa, która uniemożliwia aplikacjom internetowym wysyłanie żądań do innej domeny niż ta, z której zostały przesłane. W tym przypadku Swiggy API odrzuca żądanie, ponieważ pochodzi z innej domeny (Twojej aplikacji React). Jest to szczególnie problematyczne, gdy pobierasz dane z interfejsów API, które nie obsługują bezpośrednio żądań między źródłami.

Typowym obejściem jest użycie rozszerzeń przeglądarki, takich jak rozszerzenie Chrome „Zezwalaj na CORS”. Jednak takie rozszerzenia mogą prowadzić do niespójnych wyników. Dzieje się tak, ponieważ manipulują ustawieniami na poziomie przeglądarki, które nie zawsze są poprawnie synchronizowane z żądaniami API. W idealnym przypadku wtyczki te powinny być używane wyłącznie do celów programistycznych, a nie w środowiskach produkcyjnych. W przypadku produkcji bezpieczniejszym i bardziej niezawodnym podejściem byłoby użycie serwera proxy zaplecza, który żąda danych w imieniu Twojej aplikacji React, jak widać w rozwiązaniach dostarczonych wcześniej.

Kolejnym aspektem, który należy wziąć pod uwagę, jest skuteczne radzenie sobie z błędami. Chociaż problemy z mechanizmem CORS są częstą przyczyną błędów „Nie udało się pobrać”, inne czynniki, takie jak niestabilność sieci, nieprawidłowe adresy URL interfejsu API lub przestoje serwera mogą również powodować ten błąd. Dlatego ważne jest, aby je wdrożyć solidna obsługa błędów w kodzie, szczególnie podczas pracy z interfejsami API innych firm. Właściwy mechanizm obsługi błędów pomoże skuteczniej debugować problem i zapewni przyjazne dla użytkownika komunikaty, gdy coś pójdzie nie tak.