ReactJS: pēc Chrome CORS spraudņa pievienošanas neizdevās ienest neapstrādātu noraidīšanu (tipa kļūda).

API kļūdu apstrāde programmā React: CORS spraudņu izaicinājumi

Strādājot ar API ReaģētJS, izstrādātāji bieži saskaras ar dažādām problēmām, kas saistītas ar datu iegūšanu, it īpaši, strādājot ar trešo pušu API. Viena no izplatītākajām problēmām ir kļūda "Neapstrādāta noraidīšana (tipa kļūda): neizdevās ielādēt". Šī kļūda var rasties pat tad, ja tiek izmantotas populāras API, piemēram, Swiggy restorānu saraksta API, ko daudzi izstrādātāji izmanto, lai uzlabotu savas tīmekļa lietojumprogrammas.

Šādā gadījumā CORS Chrome paplašinājuma pievienošana varētu šķist dzīvotspējīgs risinājums, lai apietu ierobežojošās pārlūkprogrammas politikas. Tomēr tas var radīt jaunas komplikācijas, nevis atrisināt problēmu. Ja izstrādes vidē izmantojat CORS spraudni un jūsu API pieprasījumi neizdodas neilgi pēc ielādes, iespējams, rodas problēma, kuras dēļ spraudnis ir pretrunā ar pārlūkprogrammas pieprasījumu apstrādes darbību.

Izpratne par to, kā pārvaldīt vairāku izcelsmes pieprasījumus un novērst problēmas CORS kļūdas ReactJS ir būtiska vienmērīgam izstrādes procesam. API, piemēram, Swiggy's, bieži vien ir drošības slāņi, piemēram, CORS, lai kontrolētu neautorizētu klientu piekļuvi. Šie ierobežojumi var radīt kļūdas, kas ir pareizi jānovērš.

Šajā rokasgrāmatā mēs izpētīsim, kāpēc šī kļūda rodas, jo īpaši pēc CORS spraudņa pievienošanas pārlūkā Chrome. Mēs arī apspriedīsim stratēģijas, kā to atrisināt, strādājot ar Swiggy API jūsu ierīcē Reaģēt lietojumprogrammas.

Izskaidrojot risinājumus CORS problēmām React ar Swiggy API

Pirmajā risinājumā mēs izveidojām a Node.js aizmugursistēma, izmantojot Express, lai apietu CORS problēmu, ienesot restorāna datus no Swiggy API. CORS politika neļauj pārlūkprogrammām veikt pieprasījumus citam domēnam, ja vien šis domēns to neatļauj. Izveidojot vienkāršu serveri, mēs varam darboties kā vidējais slānis starp klientu un API, iegūstot datu servera pusi un atgriežot to React priekšgalam. Šī metode ļauj izvairīties no CORS kļūdām, jo ​​pieprasījums nāk no tās pašas izcelsmes kā klienta lietotne.

Express aizmugursistēma iestata pielāgotas galvenes, jo īpaši Access-Control-Allow-Origin, kas ļauj mūsu klientam pieprasīt resursus, nesaskaroties ar CORS ierobežojumiem. Swiggy API ielādes izsaukums tiek veikts servera pusē, un dati tiek atgriezti JSON formātā. Šī pieeja ražošanas vidēs bieži tiek uzskatīta par drošāku un efektīvāku, jo tā slēpj API atslēgas vai sensitīvu informāciju. Turklāt try-catch izmantošana nodrošina pareizu kļūdu apstrādi, parādot lietotājam draudzīgus kļūdu ziņojumus, ja API nereaģē.

Otrajā risinājumā mēs modificējam ieneses pieprasījumu klienta puses React kodā. Šī metode ietver pielāgotu galveņu pievienošanu ieneses izsaukumā, nodrošinot, ka pieprasījums ir pareizi formatēts pirms API sasniegšanas. Mēs izmantojam React useEffect āķis, lai aktivizētu API izsaukumu, kad komponents tiek uzstādīts. Asinhronā funkcija gaida API atbildi, pārvērš to par JSON un apstrādā kļūdas, ja pieprasījums neizdodas. Tomēr šis risinājums joprojām saskaras ar CORS problēmām, ja API tieši neatļauj pārrobežu izcelsmes pieprasījumus no pārlūkprogrammām.

Visbeidzot, trešajā risinājumā mēs izmantojam trešās puses pakalpojumu CORS-Anywhere. Šis ir starpprogrammatūras pakalpojums, kas īslaicīgi palīdz apiet CORS ierobežojumus, novirzot API pieprasījumu caur savu serveri. Lai gan šis risinājums var darboties izstrādes vidēs, tas nav ieteicams ražošanai drošības risku un atkarības no ārējiem pakalpojumiem dēļ. Tas arī ievieš papildu veiktspējas izmaksas, jo tas pievieno papildu slāni datu iegūšanas procesam. Šīs metodes izmantošana var būt ērta testēšanas fāzēs, taču drošības apsvērumu dēļ no tās jāizvairās ražošanā.

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 problēmu novēršana API pieprasījumos

Viens no kļūdas “Neizdevās ienest” iemesliem React lietojumprogrammā, īpaši, ja tiek izmantotas trešās puses API, piemēram, Swiggy, ir CORS (Cross-Origin Resource Sharing) ierobežojumi. CORS ir drošības līdzeklis, kas ierobežo tīmekļa lietojumprogrammu pieprasījumu veikšanu citā domēnā, nevis tajā, no kura tie tika apkalpoti. Šajā gadījumā Swiggy API noraida pieprasījumu, jo tas nāk no cita domēna (jūsu React lietotnes). Tas ir īpaši problemātiski, ja ienesat datus no API, kas nepārprotami neatbalsta vairāku izcelsmes pieprasījumus.

Izplatīts risinājums ir izmantot pārlūkprogrammas paplašinājumus, piemēram, Chrome paplašinājumu “Allow CORS”. Tomēr šādi paplašinājumi var radīt nekonsekventus rezultātus. Tas ir tāpēc, ka tie manipulē ar pārlūkprogrammas līmeņa iestatījumiem, kas ne vienmēr tiek pareizi sinhronizēti ar API pieprasījumiem. Ideālā gadījumā šos spraudņus vajadzētu izmantot tikai izstrādei, nevis ražošanas vidēs. Ražošanai drošāka un uzticamāka pieeja būtu aizmugursistēmas starpniekservera izmantošana, kas pieprasa datus jūsu React lietotnes vārdā, kā redzams iepriekš sniegtajos risinājumos.

Vēl viens aspekts, kas jāņem vērā, ir efektīva kļūdu apstrāde. Lai gan CORS problēmas ir izplatīts kļūdu “Neizdevās ienest” cēlonis, šo kļūdu var izraisīt arī citi faktori, piemēram, tīkla nestabilitāte, nepareizi API URL vai servera dīkstāve. Tāpēc ir svarīgi to īstenot spēcīga kļūdu apstrāde savā kodā, it īpaši, strādājot ar trešās puses API. Pareizs kļūdu apstrādes mehānisms palīdzēs efektīvāk atkļūdot problēmu un nodrošināt lietotājam draudzīgus ziņojumus, ja kaut kas noiet greizi.