ReactJS: Po dodajanju vtičnika Chrome CORS neobravnavane zavrnitve (TypeError) ni bilo mogoče pridobiti

Obravnava napak API-ja v Reactu: Izzivi vtičnikov CORS

Pri delu z API-ji v ReactJS, se razvijalci pogosto srečujejo z različnimi izzivi, povezanimi s pridobivanjem podatkov, zlasti ko imajo opravka z API-ji tretjih oseb. Ena pogosta težava, ki se pojavi, je napaka »Neobravnavana zavrnitev (TypeError): pridobivanje ni uspelo«. Ta napaka se lahko pojavi tudi pri uporabi priljubljenih API-jev, kot je API seznama restavracij Swiggy, ki ga mnogi razvijalci uporabljajo za izboljšanje svojih spletnih aplikacij.

V tem primeru se morda zdi dodajanje razširitve za Chrome CORS izvedljiva rešitev za izogibanje omejevalnim pravilnikom brskalnika. Vendar lahko povzroči nove zaplete namesto rešitve težave. Če v svojem razvojnem okolju uporabljate vtičnik CORS in vaše zahteve API ne uspejo kmalu po nalaganju, lahko naletite na težavo, pri kateri je vtičnik v nasprotju z vedenjem brskalnika pri obravnavanju zahtev.

Razumevanje, kako upravljati navzkrižne zahteve in odpravljati težave Napake CORS v ReactJS je bistvenega pomena za nemoten razvojni proces. API-ji, kot je Swiggyjev, imajo pogosto nameščene varnostne plasti, kot je CORS, za nadzor dostopa nepooblaščenih strank. Te omejitve lahko povzročijo napake, ki jih je treba ustrezno odpraviti.

V tem priročniku bomo raziskali, zakaj pride do te napake, zlasti po dodajanju vtičnika CORS v Chrome. Razpravljali bomo tudi o strategijah za njegovo rešitev med delom z API-jem Swiggy v vašem Reagiraj aplikacije.

Razlaga rešitev za težave CORS v React s Swiggy API

V prvi rešitvi smo ustvarili a Node.js backend z uporabo Expressa za obhod težave CORS pri pridobivanju podatkov o restavraciji iz Swiggyjevega API-ja. Politika CORS preprečuje, da bi brskalniki pošiljali zahteve drugi domeni, razen če ta domena to dovoljuje. Z ustvarjanjem preprostega strežnika lahko delujemo kot srednja plast med odjemalcem in API-jem, pri čemer pridobimo podatke na strani strežnika in jih vrnemo v sprednji del Reacta. Ta metoda se izogne ​​napakam CORS, saj zahteva prihaja iz istega izvora kot odjemalska aplikacija.

Zaledje Express nastavi glave po meri, zlasti Access-Control-Allow-Origin, ki naši stranki omogoča, da zahteva vire brez omejitev CORS. Klic pridobivanja v Swiggyjev API se izvede na strani strežnika, podatki pa so vrnjeni v formatu JSON. Ta pristop se pogosto šteje za bolj varnega in zmogljivega v produkcijskih okoljih, saj skriva ključe API ali občutljive informacije. Poleg tega uporaba poskusnega ulova zagotavlja ustrezno obravnavo napak in prikaže uporabniku prijazna sporočila o napakah, če se API ne odzove.

V drugi rešitvi spremenimo zahtevo za pridobivanje na kodi React na strani odjemalca. Ta metoda vključuje dodajanje glav po meri v klic pridobivanja, kar zagotavlja, da je zahteva pravilno oblikovana, preden doseže API. Uporabljamo React-ove useEffect kavelj za sprožitev klica API, ko se komponenta namesti. Funkcija async čaka na odziv API-ja, ga pretvori v JSON in obravnava napake, če zahteva ne uspe. Vendar se ta rešitev še vedno sooča s težavami CORS, če API ne dovoljuje navzkrižnih zahtev neposredno iz brskalnikov.

Končno, v tretji rešitvi uporabljamo storitev tretje osebe, imenovano CORS-Anywhere. To je storitev vmesne programske opreme, ki začasno pomaga obiti omejitve CORS s preusmeritvijo zahteve API prek njihovega strežnika. Čeprav lahko ta rešitev deluje v razvojnih okoljih, ni priporočljiva za proizvodnjo zaradi varnostnih tveganj in odvisnosti od zunanjih storitev. Uvaja tudi dodatne stroške glede zmogljivosti, saj dodaja dodatno plast procesu pridobivanja podatkov. Uporaba te metode je lahko priročna med fazami testiranja, vendar se ji je treba iz varnostnih razlogov izogibati v proizvodnji.

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;

Odpravljanje težav s CORS v zahtevah API

Eden od osnovnih razlogov za napako »Failed to fetch« v aplikaciji React, zlasti pri uporabi API-jev tretjih oseb, kot je Swiggy, je CORS (Cross-Origin Resource Sharing) omejitve. CORS je varnostna funkcija, ki spletnim aplikacijam omejuje pošiljanje zahtev v domeno, ki se razlikuje od tiste, iz katere so bile postrežene. V tem primeru API Swiggy zavrne zahtevo, ker izvira iz druge domene (vaše aplikacije React). To je še posebej problematično, ko pridobivate podatke iz API-jev, ki izrecno ne podpirajo navzkrižnih zahtev.

Običajna rešitev je uporaba razširitev brskalnika, kot je razširitev za Chrome »Dovoli CORS«. Vendar lahko takšne razširitve povzročijo nedosledne rezultate. To je zato, ker manipulirajo z nastavitvami na ravni brskalnika, ki se ne sinhronizirajo vedno pravilno z zahtevami API-ja. Idealno bi bilo, da se ti vtičniki uporabljajo samo za razvoj in ne v produkcijskih okoljih. Za produkcijo bi bil varnejši in zanesljivejši pristop uporaba zalednega strežnika proxy, ki zahteva podatke v imenu vaše aplikacije React, kot je razvidno iz prejšnjih rešitev.

Drug vidik, ki ga je treba upoštevati, je učinkovito ravnanje z napakami. Čeprav so težave s CORS pogost vzrok za napake »Pridobivanje ni uspelo«, lahko to napako povzročijo tudi drugi dejavniki, kot so nestabilnost omrežja, nepravilni URL-ji API-jev ali izpad strežnika. Zato je pomembno izvajati robustno obravnavanje napak v vaši kodi, zlasti pri delu z API-ji tretjih oseb. Ustrezen mehanizem za obravnavo napak bo pomagal učinkoviteje odpraviti napako in zagotovil uporabniku prijazna sporočila, ko gre kaj narobe.