ReactJS: Po přidání pluginu Chrome CORS se nepodařilo načíst neošetřené odmítnutí (TypeError)

Zpracování chyb API v React: CORS Plugin Challenges

Při práci s API v ReactJS, vývojáři se často setkávají s různými problémy souvisejícími s načítáním dat, zejména při práci s API třetích stran. Jedním z běžných problémů, který vzniká, je chyba „Neošetřené odmítnutí (TypeError): Nepodařilo se načíst“. K této chybě může dojít i při použití oblíbených API, jako je Swiggy’s restaurant list API, které mnoho vývojářů používá k vylepšení svých webových aplikací.

V tomto případě se přidání rozšíření CORS pro Chrome může zdát jako schůdné řešení, jak obejít restriktivní zásady prohlížeče. Místo řešení problému však může přinést nové komplikace. Pokud ve svém vývojovém prostředí používáte plugin CORS a vaše požadavky API selžou krátce po načtení, můžete narazit na problém, kdy plugin koliduje s chováním prohlížeče při zpracování požadavků.

Pochopení, jak spravovat požadavky napříč původy a jak řešit problémy Chyby CORS v ReactJS je nezbytný pro hladký vývojový proces. Rozhraní API, jako je Swiggy, mají často bezpečnostní vrstvy, jako je CORS, které řídí přístup neoprávněných klientů. Tato omezení mohou vést k chybám, které je třeba náležitě řešit.

V této příručce prozkoumáme, proč k této chybě dochází, zejména po přidání pluginu CORS do Chromu. Probereme také strategie, jak to vyřešit při práci s rozhraním Swiggy API ve vašem Reagovat aplikací.

Vysvětlení řešení problémů CORS v React s Swiggy API

V prvním řešení jsme vytvořili a Node.js backend pomocí Express k obejití problému CORS při načítání dat restaurace z Swiggy’s API. Zásada CORS brání prohlížečům zadávat požadavky na jinou doménu, pokud to tato doména nepovoluje. Vytvořením jednoduchého serveru můžeme fungovat jako střední vrstva mezi klientem a rozhraním API, načítat datový server na straně serveru a vrátit je do front-endu React. Tato metoda zabraňuje chybám CORS, protože požadavek pochází ze stejného původu jako klientská aplikace.

Backend Express nastavuje vlastní hlavičky, zejména Access-Control-Allow-Origin, což umožňuje našemu klientovi požadovat zdroje bez omezení CORS. Volání načtení do rozhraní API Swiggy se provádí na straně serveru a data jsou vrácena ve formátu JSON. Tento přístup je často považován za bezpečnější a výkonnější v produkčním prostředí, protože skrývá klíče API nebo citlivé informace. Kromě toho použití try-catch zajišťuje správné zpracování chyb a zobrazuje uživatelsky přívětivé chybové zprávy, pokud API nereaguje.

Ve druhém řešení upravíme požadavek na načtení v kódu React na straně klienta. Tato metoda zahrnuje přidávání vlastních hlaviček do volání načítání, což zajišťuje, že požadavek je správně naformátován před dosažením rozhraní API. Používáme React's useEffect hák pro spuštění volání API, když se komponenta připojí. Asynchronní funkce čeká na odpověď API, převede ji na JSON a zpracuje chyby, pokud požadavek selže. Toto řešení však stále čelí problémům s CORS, pokud rozhraní API neumožňuje přímé požadavky z prohlížečů.

Nakonec ve třetím řešení používáme službu třetí strany s názvem CORS-Anywhere. Jedná se o middlewarovou službu, která dočasně pomáhá obejít omezení CORS přesměrováním požadavku API přes jejich server. I když toto řešení může fungovat ve vývojových prostředích, nedoporučuje se pro produkční provoz kvůli bezpečnostním rizikům a závislosti na externích službách. Zavádí také režii výkonu, protože přidává další vrstvu do procesu načítání dat. Použití této metody může být pohodlné během testovacích fází, ale z bezpečnostních důvodů je třeba se jí ve výrobě vyhnout.

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;

Odstraňování problémů CORS v požadavcích API

Jedním ze základních důvodů chyby „Failed to fetch“ v aplikaci React, zejména při použití rozhraní API třetích stran, jako je Swiggy, je CORS (Cross-Origin Resource Sharing) omezení. CORS je bezpečnostní funkce, která omezuje webové aplikace v zasílání požadavků na jinou doménu, než ze které byly obsluhovány. V tomto případě Swiggy API odmítne požadavek, protože pochází z jiné domény (vaše aplikace React). To je zvláště problematické, když načítáte data z rozhraní API, která explicitně nepodporují požadavky napříč původem.

Běžným řešením je použití rozšíření prohlížeče, jako je rozšíření Chrome „Povolit CORS“. Taková rozšíření však mohou vést k nekonzistentním výsledkům. Je to proto, že manipulují s nastaveními na úrovni prohlížeče, která se ne vždy správně synchronizují s požadavky API. Tyto pluginy by se měly ideálně používat pouze pro vývoj a ne v produkčním prostředí. Pro produkci by bezpečnější a spolehlivější přístup bylo použití backendového proxy serveru, který požaduje data jménem vaší aplikace React, jak je vidět v řešeních poskytnutých dříve.

Dalším aspektem, který je třeba zvážit, je efektivní řešení chyb. Problémy CORS jsou sice běžnou příčinou chyb „Nepodařilo se načíst“, ale k této chybě mohou vést i další faktory, jako je nestabilita sítě, nesprávné adresy URL API nebo výpadky serveru. Proto je důležité implementovat robustní zpracování chyb ve vašem kódu, zejména při práci s rozhraními API třetích stran. Správný mechanismus zpracování chyb pomůže efektivněji ladit problém a poskytovat uživatelsky přívětivé zprávy, když se něco pokazí.