ReactJS: Chrome CORS -laajennuksen lisäämisen jälkeen käsittelemättömän hylkäämisen (tyyppivirhe) hakeminen epäonnistui

API-virheiden käsittely Reactissa: CORS Plugin Challenges

Kun työskentelet sovellusliittymien kanssa ReactJS, kehittäjät kohtaavat usein erilaisia ​​tiedonhakuun liittyviä haasteita, varsinkin kun he ovat tekemisissä kolmannen osapuolen API:iden kanssa. Yksi yleinen ongelma on Käsittelemätön hylkääminen (TypeError): Haku epäonnistui. Tämä virhe voi ilmetä jopa käytettäessä suosittuja sovellusliittymiä, kuten Swiggy's restaurant list API, jota monet kehittäjät käyttävät verkkosovellustensa parantamiseen.

Tässä tapauksessa CORS Chrome -laajennuksen lisääminen saattaa tuntua käyttökelpoiselta ratkaisulta rajoittavien selainkäytäntöjen ohittamiseksi. Se voi kuitenkin aiheuttaa uusia komplikaatioita ongelman ratkaisemisen sijaan. Jos käytät CORS-laajennusta kehitysympäristössäsi ja API-pyyntösi epäonnistuvat pian latauksen jälkeen, saatat kohdata ongelman, jossa laajennus on ristiriidassa selaimen pyyntöjen käsittelyn kanssa.

Ymmärtää kuinka hallita eri lähteiden pyyntöjä ja tehdä vianetsintää CORS-virheet ReactJS:ssä on välttämätön sujuvalle kehitysprosessille. Swiggy'sin kaltaisissa sovellusliittymissä on usein suojauskerroksia, kuten CORS, jotka hallitsevat luvattomien asiakkaiden pääsyä. Nämä rajoitukset voivat johtaa virheisiin, jotka on korjattava oikein.

Tässä oppaassa tutkimme, miksi tämä virhe ilmenee, erityisesti sen jälkeen, kun olet lisännyt CORS-laajennuksen Chromeen. Keskustelemme myös strategioista sen ratkaisemiseksi työskennellessäsi Swiggy-sovellusliittymän kanssa Reagoi sovelluksia.

Ratkaisujen selittäminen CORS-ongelmiin Reactissa Swiggy API:lla

Ensimmäisessä ratkaisussa loimme a Node.js backend käyttää Expressiä CORS-ongelman ohittamiseksi haettaessa ravintolatietoja Swiggyn API:sta. CORS-käytäntö estää selaimia tekemästä pyyntöjä eri toimialueille, ellei tämä toimialue salli sitä. Luomalla yksinkertaisen palvelimen voimme toimia välikerroksena asiakkaan ja API:n välillä, noutamalla datapalvelinpuolen ja palauttamalla sen Reactin käyttöliittymään. Tämä menetelmä välttää CORS-virheet, koska pyyntö tulee samasta lähteestä kuin asiakassovellus.

Express-taustaohjelma määrittää mukautetut otsikot, erityisesti Access-Control-Allow-Origin, jonka avulla asiakkaamme voi pyytää resursseja ilman CORS-rajoituksia. Hakukutsu Swiggyn API:lle tehdään palvelinpuolella, ja tiedot palautetaan JSON-muodossa. Tätä lähestymistapaa pidetään usein turvallisempana ja tehokkaampana tuotantoympäristöissä, koska se piilottaa API-avaimet tai arkaluontoiset tiedot. Lisäksi try-catchin käyttö varmistaa oikean virheenkäsittelyn ja näyttää käyttäjäystävälliset virheilmoitukset, jos API ei vastaa.

Toisessa ratkaisussa muokkaamme asiakaspuolen React-koodin hakupyyntöä. Tämä menetelmä sisältää mukautettujen otsikoiden lisäämisen hakukutsuun, jotta varmistetaan, että pyyntö on muotoiltu oikein ennen API:n saavuttamista. Käytämme Reactia useEffect koukku käynnistääksesi API-kutsun, kun komponentti kiinnittyy. Async-funktio odottaa API-vastausta, muuntaa sen JSON-muotoon ja käsittelee virheet, jos pyyntö epäonnistuu. Tässä ratkaisussa on kuitenkin edelleen CORS-ongelmia, jos API ei salli ristikkäisiä pyyntöjä suoraan selaimista.

Lopuksi kolmannessa ratkaisussa käytämme kolmannen osapuolen palvelua nimeltä CORS-Anywhere. Tämä on väliohjelmistopalvelu, joka auttaa väliaikaisesti ohittamaan CORS-rajoitukset reitittämällä API-pyynnön uudelleen palvelimen kautta. Vaikka tämä ratkaisu voi toimia kehitysympäristöissä, sitä ei suositella tuotantoon turvallisuusriskien ja ulkoisten palveluiden riippuvuuden vuoksi. Se lisää myös suorituskykyä, koska se lisää ylimääräisen kerroksen tiedonhakuprosessiin. Tämän menetelmän käyttö voi olla kätevää testausvaiheiden aikana, mutta sitä tulee välttää tuotannossa turvallisuussyistä.

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;

API-pyyntöjen CORS-ongelmien vianmääritys

Yksi taustalla olevista syistä nouto epäonnistui -virheelle React-sovelluksessa, erityisesti käytettäessä kolmannen osapuolen sovellusliittymiä, kuten Swiggyä, on CORS (Cross-Origin Resource Sharing) rajoitukset. CORS on suojausominaisuus, joka estää verkkosovelluksia tekemästä pyyntöjä eri toimialueelle kuin se, josta ne on toimitettu. Tässä tapauksessa Swiggy-sovellusliittymä hylkää pyynnön, koska se on peräisin eri verkkotunnuksesta (React-sovelluksestasi). Tämä on erityisen ongelmallista, kun haet tietoja sovellusliittymistä, jotka eivät nimenomaisesti tue ristikkäisiä pyyntöjä.

Yleinen ratkaisu on selainlaajennusten, kuten "Salli CORS" Chrome-laajennuksen, käyttö. Tällaiset laajennukset voivat kuitenkin johtaa epäjohdonmukaisiin tuloksiin. Tämä johtuu siitä, että ne käsittelevät selaintason asetuksia, jotka eivät aina synkronoidu oikein API-pyyntöjen kanssa. Näitä laajennuksia tulisi ihanteellisesti käyttää vain kehitystyössä, ei tuotantoympäristöissä. Tuotannossa turvallisempi ja luotettavampi lähestymistapa olisi käyttää taustavälityspalvelinta, joka pyytää tietoja React-sovelluksesi puolesta, kuten aiemmin toimitetuista ratkaisuista näkyy.

Toinen huomioitava näkökohta on virheiden tehokas käsittely. Vaikka CORS-ongelmat ovat yleinen syy nouto epäonnistui -virheisiin, myös muut tekijät, kuten verkon epävakaus, virheelliset API-URL-osoitteet tai palvelimen seisokki, voivat aiheuttaa tämän virheen. Siksi on tärkeää toteuttaa vankka virheiden käsittely koodissasi, varsinkin kun työskentelet kolmannen osapuolen sovellusliittymien kanssa. Asianmukainen virheenkäsittelymekanismi auttaa ongelman korjaamisessa tehokkaammin ja antaa käyttäjäystävällisiä viestejä, kun jokin menee pieleen.