ReactJS: Po pridaní doplnku Chrome CORS sa nepodarilo načítať neošetrené odmietnutie (TypeError)

Spracovanie chýb API v React: CORS Plugin Challenges

Pri práci s API v ReactJS, vývojári sa často stretávajú s rôznymi problémami súvisiacimi s načítavaním údajov, najmä pri práci s rozhraniami API tretích strán. Jedným z bežných problémov, ktorý vzniká, je chyba „Neošetrené odmietnutie (TypeError): Nepodarilo sa načítať“. Táto chyba sa môže vyskytnúť aj pri používaní populárnych rozhraní API, ako je rozhranie API zoznamu reštaurácií Swiggy, ktoré mnohí vývojári používajú na vylepšenie svojich webových aplikácií.

V tomto prípade sa pridanie rozšírenia CORS Chrome môže zdať ako životaschopné riešenie na obídenie reštriktívnych pravidiel prehliadača. Namiesto vyriešenia problému však môže priniesť nové komplikácie. Ak vo svojom vývojovom prostredí používate doplnok CORS a vaše požiadavky API zlyhajú krátko po načítaní, môžete naraziť na problém, keď je doplnok v konflikte so správaním prehliadača pri spracovávaní požiadaviek.

Pochopenie, ako spravovať požiadavky z rôznych zdrojov a odstraňovať problémy Chyby CORS v ReactJS je nevyhnutný pre hladký vývojový proces. Rozhrania API ako Swiggy majú často bezpečnostné vrstvy, ako napríklad CORS, na kontrolu prístupu od neoprávnených klientov. Tieto obmedzenia môžu viesť k chybám, ktoré je potrebné náležite odstrániť.

V tejto príručke preskúmame, prečo sa táto chyba vyskytuje, najmä po pridaní doplnku CORS do prehliadača Chrome. Budeme tiež diskutovať o stratégiách na jeho vyriešenie pri práci s rozhraním Swiggy API vo vašom počítači Reagovať aplikácie.

Vysvetlenie riešení problémov CORS v React s Swiggy API

V prvom riešení sme vytvorili a Node.js backend pomocou Express na obídenie problému CORS pri získavaní údajov reštaurácie z rozhrania Swiggy's API. Politika CORS bráni prehliadačom odosielať požiadavky na inú doménu, pokiaľ to táto doména nepovoľuje. Vytvorením jednoduchého servera môžeme pôsobiť ako stredná vrstva medzi klientom a API, načítavať dátový server na strane servera a vrátiť ho do front-endu React. Táto metóda zabraňuje chybám CORS, pretože požiadavka pochádza z rovnakého pôvodu ako klientska aplikácia.

Backend Express nastavuje vlastné hlavičky, najmä hlavičky Access-Control-Allow-Origin, čo umožňuje nášmu klientovi požadovať zdroje bez toho, aby čelil obmedzeniam CORS. Volanie načítania do rozhrania API Swiggy sa uskutoční na strane servera a údaje sa vrátia vo formáte JSON. Tento prístup sa často považuje za bezpečnejší a výkonnejší v produkčnom prostredí, pretože skrýva kľúče API alebo citlivé informácie. Okrem toho, použitie try-catch zaisťuje správne spracovanie chýb a zobrazuje užívateľsky prívetivé chybové hlásenia, ak API nereaguje.

V druhom riešení upravíme požiadavku na vyzdvihnutie v kóde React na strane klienta. Táto metóda zahŕňa pridanie vlastných hlavičiek do volania načítania, čím sa zabezpečí, že požiadavka je pred dosiahnutím API správne naformátovaná. Používame React's useEffect hák na spustenie volania API, keď sa komponent pripojí. Async funkcia čaká na odpoveď API, konvertuje ju na JSON a spracováva chyby, ak požiadavka zlyhá. Toto riešenie však stále čelí problémom CORS, ak rozhranie API nepovoľuje priamo požiadavky na krížový pôvod z prehliadačov.

Nakoniec, v treťom riešení používame službu tretej strany s názvom CORS-Anywhere. Toto je služba middleware, ktorá dočasne pomáha obísť obmedzenia CORS presmerovaním požiadavky API cez ich server. Aj keď toto riešenie môže fungovať vo vývojových prostrediach, neodporúča sa pre produkciu z dôvodu bezpečnostných rizík a závislosti na externých službách. Zavádza tiež réžiu výkonu, pretože pridáva ďalšiu vrstvu do procesu získavania údajov. Použitie tejto metódy môže byť pohodlné počas testovacích fáz, ale z bezpečnostných dôvodov by sa jej pri výrobe malo vyhnúť.

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;

Riešenie problémov s CORS v žiadostiach API

Jedným zo základných dôvodov chyby „Failed to fetch“ v aplikácii React, najmä pri použití rozhraní API tretích strán, ako je Swiggy, je CORS (Cross-Origin Resource Sharing) obmedzenia. CORS je bezpečnostná funkcia, ktorá bráni webovým aplikáciám odosielať požiadavky na inú doménu, než z ktorej boli obsluhované. V tomto prípade Swiggy API odmietne požiadavku, pretože pochádza z inej domény (vašej aplikácie React). Toto je obzvlášť problematické, keď načítavate údaje z rozhraní API, ktoré explicitne nepodporujú požiadavky krížového pôvodu.

Bežným riešením je používanie rozšírení prehliadača, ako je rozšírenie prehliadača Chrome „Povoliť CORS“. Takéto rozšírenia však môžu viesť k nekonzistentným výsledkom. Je to preto, že manipulujú s nastaveniami na úrovni prehliadača, ktoré sa nie vždy správne synchronizujú s požiadavkami API. Tieto pluginy by sa v ideálnom prípade mali používať iba na vývoj a nie v produkčnom prostredí. Pre produkciu by bol bezpečnejší a spoľahlivejší prístup pomocou backendového proxy servera, ktorý požaduje údaje v mene vašej aplikácie React, ako je vidieť v riešeniach poskytnutých vyššie.

Ďalším aspektom, ktorý treba zvážiť, je efektívne zvládanie chýb. Zatiaľ čo problémy s CORS sú bežnou príčinou chýb „Nepodarilo sa načítať“, túto chybu môžu spôsobiť aj iné faktory, ako je nestabilita siete, nesprávne adresy URL rozhrania API alebo výpadok servera. Preto je dôležité implementovať robustné spracovanie chýb vo vašom kóde, najmä pri práci s rozhraniami API tretích strán. Správny mechanizmus na odstraňovanie chýb pomôže efektívnejšie odladiť problém a poskytnúť užívateľsky prívetivé správy, keď sa niečo pokazí.