ReactJS: pridėjus „Chrome CORS“ papildinį nepavyko gauti neapdoroto atmetimo (tipo klaida)

API klaidų tvarkymas „React“: CORS papildinio iššūkiai

Kai dirbate su API ReaguotiJS, kūrėjai dažnai susiduria su įvairiais iššūkiais, susijusiais su duomenų gavimu, ypač kai susiduria su trečiųjų šalių API. Viena dažnai kylanti problema yra klaida „Neapdorotas atmetimas (tipo klaida): nepavyko gauti“. Ši klaida gali atsirasti net naudojant populiarias API, pvz., Swiggy restoranų sąrašo API, kurią daugelis kūrėjų naudoja tobulindami žiniatinklio programas.

Šiuo atveju CORS Chrome plėtinio pridėjimas gali atrodyti kaip tinkamas sprendimas apeiti ribojančias naršyklės taisykles. Tačiau tai gali sukelti naujų komplikacijų, o ne išspręsti problemą. Jei kūrimo aplinkoje naudojate CORS papildinį, o jūsų API užklausos nepavyksta netrukus po įkėlimo, gali kilti problema, kai papildinys prieštarauja naršyklės užklausų apdorojimo elgsenai.

Supratimas, kaip valdyti įvairių šaltinių užklausas ir šalinti triktis CORS klaidos ReactJS yra būtinas sklandžiam kūrimo procesui. Tokios API kaip „Swiggy's“ dažnai turi saugos sluoksnius, pvz., CORS, skirtus kontroliuoti neteisėtų klientų prieigą. Šie apribojimai gali sukelti klaidų, kurias reikia tinkamai pašalinti.

Šiame vadove išnagrinėsime, kodėl įvyksta ši klaida, ypač pridėjus CORS papildinį „Chrome“. Taip pat aptarsime strategijas, kaip ją išspręsti dirbdami su Swiggy API Reaguoti programas.

CORS problemų sprendimų paaiškinimas „React“ naudojant „Swiggy“ API

Pirmajame sprendime sukūrėme a Node.js backend naudojant Express, kad apeitų CORS problemą, kai gaunami restorano duomenys iš Swiggy API. CORS politika neleidžia naršyklėms teikti užklausų kitam domenui, nebent tas domenas tai leidžia. Sukūrę paprastą serverį, galime veikti kaip vidurinis sluoksnis tarp kliento ir API, paimdami duomenis iš serverio ir grąžindami juos į React sąsają. Šis metodas leidžia išvengti CORS klaidų, nes užklausa gaunama iš tos pačios kilmės kaip ir kliento programa.

„Express backend“ nustato pasirinktines antraštes, ypač Prieiga-Control-Allow-Origin, kuri leidžia mūsų klientui prašyti išteklių nepatiriant CORS apribojimų. Swiggy API iškvietimas atliekamas serverio pusėje, o duomenys grąžinami JSON formatu. Šis metodas dažnai laikomas saugesniu ir našesniu gamybinėje aplinkoje, nes paslepia API raktus arba neskelbtiną informaciją. Be to, try-catch naudojimas užtikrina tinkamą klaidų tvarkymą ir pateikia patogius klaidų pranešimus, jei API nereaguoja.

Antrajame sprendime modifikuojame gavimo užklausą kliento pusės „React“ kode. Šis metodas apima tinkintų antraščių įtraukimą į iškvietimo iškvietimą, užtikrinant, kad užklausa būtų tinkamai suformatuota prieš pasiekiant API. Mes naudojame React's naudojimoEfektas kabliukas, kad suaktyvintų API iškvietimą, kai komponentas pritvirtinamas. Asinchronizavimo funkcija laukia API atsakymo, konvertuoja jį į JSON ir apdoroja klaidas, jei užklausa nepavyksta. Tačiau šis sprendimas vis tiek susiduria su CORS problemomis, jei API neleidžia tiesiogiai pateikti kelių šaltinių užklausų iš naršyklių.

Galiausiai, trečiajame sprendime naudojame trečiosios šalies paslaugą, vadinamą CORS-Anywhere. Tai tarpinės programinės įrangos paslauga, kuri laikinai padeda apeiti CORS apribojimus, nukreipdama API užklausą per jų serverį. Nors šis sprendimas gali veikti kūrimo aplinkoje, jis nerekomenduojamas gamybai dėl saugumo rizikos ir priklausomybės nuo išorinių paslaugų. Tai taip pat padidina našumo išlaidas, nes prideda papildomą duomenų gavimo proceso sluoksnį. Šio metodo naudojimas gali būti patogus bandymo etapuose, tačiau saugumo sumetimais jo reikėtų vengti gamyboje.

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 trikčių šalinimas API užklausose

Viena iš pagrindinių „React“ programos klaidos „Nepavyko gauti“ priežasčių, ypač naudojant trečiųjų šalių API, pvz., „Swiggy“, yra CORS (Kryžminio šaltinio išteklių bendrinimo) apribojimai. CORS yra saugos funkcija, kuri neleidžia žiniatinklio programoms teikti užklausų kitam domenui nei tas, iš kurio jos buvo aptarnaujamos. Šiuo atveju „Swiggy“ API užklausą atmeta, nes ji kilusi iš kito domeno (jūsų „React“ programos). Tai ypač sudėtinga, kai gaunate duomenis iš API, kurios aiškiai nepalaiko kelių šaltinių užklausų.

Įprastas sprendimas yra naudoti naršyklės plėtinius, pvz., „Chrome“ plėtinį „Leisti CORS“. Tačiau tokie plėtiniai gali duoti nenuoseklių rezultatų. Taip yra todėl, kad jie manipuliuoja naršyklės lygio nustatymais, kurie ne visada tinkamai sinchronizuojasi su API užklausomis. Idealiu atveju šie papildiniai turėtų būti naudojami tik kuriant, o ne gamybinėje aplinkoje. Gamyboje saugesnis ir patikimesnis būdas būtų naudoti tarpinį serverį, kuris prašo duomenų jūsų „React“ programos vardu, kaip matyti iš anksčiau pateiktų sprendimų.

Kitas aspektas, į kurį reikia atsižvelgti, yra veiksmingas klaidų valdymas. Nors CORS problemos yra dažna klaidų „Nepavyko gauti“ priežastis, šią klaidą taip pat gali sukelti kiti veiksniai, pvz., tinklo nestabilumas, neteisingi API URL arba serverio prastovos. Todėl svarbu įgyvendinti patikimas klaidų valdymas savo kode, ypač kai dirbate su trečiųjų šalių API. Tinkamas klaidų apdorojimo mechanizmas padės veiksmingiau derinti problemą ir pateikti patogius pranešimus, kai kas nors negerai.