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 , 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 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 alkalmazások.

Parancs	Használati példa
fetch()	Ezzel a paranccsal HTTP-kéréseket küldhet a Swiggy API-nak. Aszinkron módon kéri le az erőforrásokat, és ígéretet ad vissza, amely egy válaszobjektummá válik. Kulcsfontosságú az éttermi adatok API-ból való lekéréséhez.
useEffect()	A React alkalmazásban ez a hook lehetővé teszi mellékhatások, például API-hívások végrehajtását az összetevő renderelése után. Biztosítja, hogy a Swiggy API-hoz intézett lekérési kérés az összetevő csatlakoztatása után megtörténjen.
res.setHeader()	Ez az Express parancs egyéni HTTP-fejléceket állít be, mint pl , ami döntő fontosságú a CORS kezelésében. Lehetővé teszi a háttérrendszer számára, hogy bármilyen forrásból engedélyezze a kéréseket, megelőzve a CORS hibákat.
res.json()	Ezzel a módszerrel JSON-választ küldenek vissza az ügyfélnek. A proxyszerver-megoldásban biztosítja, hogy a Swiggytől lekért API-adatok JSON-formátumban jelenjenek meg, amelyet a kezelőfelület könnyen felhasználhat.
await	Ez a kulcsszó szünetelteti az aszinkron függvény végrehajtását, amíg a lekérési művelet meg nem oldódik, biztosítva, hogy a kód megvárja az API adatait a folytatás előtt, megelőzve a kezeletlen elutasításokat.
express()	A függvény egy Express szerver példányának létrehozására szolgál. Ez a kiszolgáló proxyként működik a frontend és a Swiggy API között, hogy megakadályozza a CORS-problémákat az adatlekérés során.
app.listen()	Ez a parancs arra készteti az Express szervert, hogy figyeljen a bejövő kérésekre egy megadott porton (például ebben az esetben az 5000-es porton). Ez kulcsfontosságú a proxyszerver helyi üzemeltetéséhez a fejlesztés során.
try...catch	Ez a blokk kezeli a lekérési kérés során előforduló hibákat, például hálózati hibákat vagy a Swiggy API-val kapcsolatos problémákat. Biztosítja, hogy az alkalmazás kecsesen kezelje a hibákat ahelyett, hogy összeomolna.

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 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 , 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 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, (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 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.

1. Mi a CORS és miért fontos?
2. A CORS (Cross-Origin Resource Sharing) egy biztonsági szabályzat, amelyet a böngészők kényszerítenek ki, hogy megakadályozzák a nem megbízható tartományokból érkező rosszindulatú kéréseket. Biztosítja, hogy csak bizonyos tartományok kaphatnak erőforrásokat a szerverről.
3. Miért kapom a "Kezeletlen elutasítás (TypeError): Nem sikerült lekérni" üzenetet?
4. Ez a hiba általában akkor fordul elő, ha az API-kérelme CORS-korlátozások miatt le van tiltva. Ezt a helytelen API URL-címek vagy a szerverrel kapcsolatos problémák is okozhatják.
5. Mit jelent a horog csinálni ebben az összefüggésben?
6. A A hook in React egy API-kérés indítására szolgál az összetevő felszerelése után. Gondoskodik arról, hogy a lekérési művelet a megfelelő időben történjen, megelőzve a több szükségtelen kérést.
7. Hogyan javíthatom ki a CORS hibákat egy React alkalmazásban?
8. A CORS hibák kijavításához használjon háttérproxyt, és állítsa be a megfelelő fejléceket a szerveren, vagy támaszkodhat olyan szolgáltatásokra, mint a CORS-Anywhere fejlesztési célokra.
9. Használhatok CORS böngészőbővítményeket éles környezetben?
10. Nem, a CORS böngészőbővítményeket csak fejlesztéshez szabad használni. Éles környezetben biztonságosabb a CORS konfigurálása a szerveren vagy proxyszerver használata.

A CORS-hibák gyakori kihívást jelentenek a harmadik féltől származó API-kat használó React-alkalmazások fejlesztésekor. Bár a böngészőbővítmények segíthetnek a fejlesztésben, kritikus fontosságú megbízhatóbb megoldások, például proxyszerver bevezetése éles környezetben a biztonság és az adatok integritásának megőrzése érdekében.

A megfelelő technikák – például hibakezelés és háttérmegoldások – használatával a fejlesztők hatékonyan kezelhetik az olyan problémákat, mint a „Nem sikerült lekérni”. Ez biztosítja, hogy alkalmazásaik zökkenőmentes felhasználói élményt nyújtsanak az API-kkal való interakció során, javítva a teljesítményt és a funkcionalitást.