ReactJS: A Chrome CORS beépülő modul hozzáadása után a kezeletlen elutasítás (TypeError) lekérése nem sikerült

API-hibák kezelése a React: CORS beépülő modul kihívásaiban

Amikor API-kkal dolgozik ReactJS, a fejlesztők gyakran szembesülnek különféle kihívásokkal az adatlekéréssel kapcsolatban, különösen, ha harmadik féltől származó API-kkal foglalkoznak. Az egyik gyakori probléma a „Kezeletlen elutasítás (TypeError): Nem sikerült lekérni” hiba. Ez a hiba akkor is előfordulhat, ha olyan népszerű API-kat használ, mint például a Swiggy's restaurant list API, amelyet sok fejlesztő használ webes alkalmazásai fejlesztésére.

Ebben az esetben a CORS Chrome-bővítmény hozzáadása életképes megoldásnak tűnhet a korlátozó böngészőszabályok megkerülésére. A probléma megoldása helyett azonban új bonyodalmakat idézhet elő. Ha CORS beépülő modult használ a fejlesztői környezetben, és az API-kérelmei röviddel a betöltés után meghiúsulnak, akkor olyan problémába ütközhet, amely miatt a beépülő modul ütközik a böngésző kéréskezelési viselkedésével.

A több eredetű kérelmek kezelésének és hibaelhárításának megértése CORS hibák a ReactJS-ben elengedhetetlen a zökkenőmentes fejlesztési folyamathoz. Az olyan API-k, mint a Swiggy's, gyakran rendelkeznek biztonsági rétegekkel, például CORS-sel, amelyek szabályozzák a jogosulatlan ügyfelek hozzáférését. Ezek a korlátozások hibákhoz vezethetnek, amelyeket megfelelően kell kezelni.

Ebben az útmutatóban megvizsgáljuk, miért fordul elő ez a hiba, különösen egy CORS-bővítmény hozzáadása után a Chrome-ban. Megvitatjuk a megoldási stratégiákat is, miközben a Swiggy API-val dolgozik Reagál alkalmazások.

Megoldások magyarázata a CORS-problémákra a React with Swiggy API segítségével

Az első megoldásban létrehoztuk a Node.js A háttérrendszer Express használatával megkerüli a CORS-problémát, amikor lekéri az éttermi adatokat a Swiggy API-ból. A CORS-házirend megakadályozza, hogy a böngészők egy másik tartományba küldjenek kéréseket, hacsak az adott tartomány ezt nem engedélyezi. Egy egyszerű szerver létrehozásával középső rétegként működhetünk a kliens és az API között, lekérve az adatszerver-oldalt, és visszaküldve azt a React előtérbe. Ez a módszer elkerüli a CORS hibákat, mivel a kérés ugyanabból a forrásból származik, mint az ügyfélalkalmazás.

Az Express háttérprogram egyéni fejléceket állít be, különösen a Access-Control-Allow-Origin, amely lehetővé teszi ügyfelünk számára, hogy CORS-korlátozások nélkül igényelje az erőforrásokat. A Swiggy API lekérési hívása szerveroldali, és az adatok JSON formátumban kerülnek visszaadásra. Ezt a megközelítést éles környezetben gyakran biztonságosabbnak és hatékonyabbnak tartják, mivel elrejti az API-kulcsokat vagy az érzékeny információkat. Továbbá a try-catch használata biztosítja a megfelelő hibakezelést, felhasználóbarát hibaüzeneteket jelenít meg, ha az API nem válaszol.

A második megoldásban módosítjuk a lekérési kérést az ügyféloldali React kódon. Ez a módszer magában foglalja az egyéni fejlécek hozzáadását a lekérési híváshoz, biztosítva, hogy a kérés megfelelően legyen formázva, mielőtt elérné az API-t. React-ot használunk useEffect hook az API-hívás elindításához, amikor az összetevő felcsatolódik. Az aszinkron függvény megvárja az API-választ, átalakítja azt JSON-ba, és kezeli a hibákat, ha a kérés sikertelen. Ez a megoldás azonban továbbra is CORS-problémákkal szembesül, ha az API nem teszi lehetővé közvetlenül a böngészőktől származó, több eredetre vonatkozó kéréseket.

Végül a harmadik megoldásban egy harmadik féltől származó CORS-Anywhere nevű szolgáltatást használunk. Ez egy köztesszoftver-szolgáltatás, amely ideiglenesen segít megkerülni a CORS-korlátozásokat az API-kérés átirányításával a kiszolgálón keresztül. Bár ez a megoldás fejlesztői környezetekben is működhet, a biztonsági kockázatok és a külső szolgáltatásoktól való függés miatt nem ajánlott termelésre. Ezenkívül teljesítménynövelést is bevezet, mivel egy további réteget ad az adatlekérési folyamathoz. Ennek a módszernek a használata kényelmes lehet a tesztelési fázisok során, de biztonsági okokból kerülni kell a gyártás során.

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;

CORS-problémák hibaelhárítása az API-kérésekben

A „Failed to fetch” hiba egyik mögöttes oka a React alkalmazásban, különösen harmadik féltől származó API-k, például a Swiggy használata esetén, CORS (Cross-Origin Resource Sharing) korlátozások. A CORS egy biztonsági funkció, amely megakadályozza, hogy a webes alkalmazások más tartományba küldjenek kéréseket, mint ahonnan kiszolgálták. Ebben az esetben a Swiggy API elutasítja a kérést, mert az egy másik tartományból (az Ön React alkalmazásából) származik. Ez különösen akkor jelent problémát, ha olyan API-kból tölt le adatokat, amelyek nem támogatják kifejezetten a több eredetű kérelmet.

Gyakori megoldás a böngészőbővítmények, például a „CORS engedélyezése” Chrome-bővítmény használata. Az ilyen kiterjesztések azonban következetlen eredményekhez vezethetnek. Ennek az az oka, hogy manipulálják a böngészőszintű beállításokat, amelyek nem mindig szinkronizálódnak megfelelően az API-kérésekkel. Ezeket a beépülő modulokat ideális esetben csak fejlesztésre kell használni, éles környezetben nem. Az éles üzemben biztonságosabb és megbízhatóbb megoldás egy olyan háttérproxyszerver használata, amely az Ön React-alkalmazása nevében kéri le az adatokat, ahogy az a korábban biztosított megoldásokban is látható.

Egy másik szempont, amelyet figyelembe kell venni, a hibák hatékony kezelése. Míg a CORS-problémák a „Failed to fetch” hibák gyakori okai, más tényezők, például a hálózati instabilitás, a helytelen API URL-ek vagy a szerver leállása is okozhatják ezt a hibát. Ezért fontos a megvalósítás robusztus hibakezelés kódjában, különösen, ha harmadik féltől származó API-kkal dolgozik. A megfelelő hibakezelési mechanizmus segít a probléma hatékonyabb hibakeresésében, és felhasználóbarát üzeneteket küld, ha valami elromlik.