ReactJS: Μετά την προσθήκη της προσθήκης Chrome CORS, η ανάκτηση της μη χειριζόμενης απόρριψης (TypeError) απέτυχε

Χειρισμός σφαλμάτων API στο React: CORS Plugin Challenges

Όταν εργάζεστε με API στο ReactJS, οι προγραμματιστές αντιμετωπίζουν συχνά διάφορες προκλήσεις που σχετίζονται με την ανάκτηση δεδομένων, ειδικά όταν ασχολούνται με API τρίτων. Ένα συνηθισμένο ζήτημα που προκύπτει είναι το σφάλμα "Μη χειριζόμενη απόρριψη (TypeError): Απέτυχε η ανάκτηση". Αυτό το σφάλμα μπορεί να προκύψει ακόμη και όταν χρησιμοποιείτε δημοφιλή API, όπως το API της λίστας εστιατορίων του Swiggy, το οποίο χρησιμοποιούν πολλοί προγραμματιστές για να βελτιώσουν τις εφαρμογές ιστού τους.

Σε αυτήν την περίπτωση, η προσθήκη μιας επέκτασης CORS Chrome μπορεί να φαίνεται ως μια βιώσιμη λύση για την παράκαμψη των περιοριστικών πολιτικών του προγράμματος περιήγησης. Ωστόσο, μπορεί να δημιουργήσει νέες επιπλοκές αντί να επιλύσει το πρόβλημα. Εάν χρησιμοποιείτε μια προσθήκη CORS στο περιβάλλον ανάπτυξής σας και τα αιτήματα API αποτυγχάνουν λίγο μετά τη φόρτωση, ενδέχεται να αντιμετωπίζετε πρόβλημα όπου η προσθήκη έρχεται σε διένεξη με τη συμπεριφορά χειρισμού αιτημάτων του προγράμματος περιήγησης.

Κατανόηση του τρόπου διαχείρισης αιτημάτων πολλαπλής προέλευσης και αντιμετώπισης προβλημάτων Σφάλματα CORS στο ReactJS είναι απαραίτητο για μια ομαλή διαδικασία ανάπτυξης. Τα API όπως του Swiggy έχουν συχνά επίπεδα ασφαλείας, όπως το CORS, για τον έλεγχο της πρόσβασης από μη εξουσιοδοτημένους πελάτες. Αυτοί οι περιορισμοί μπορεί να οδηγήσουν σε σφάλματα που πρέπει να αντιμετωπιστούν σωστά.

Σε αυτόν τον οδηγό, θα διερευνήσουμε γιατί παρουσιάζεται αυτό το σφάλμα, ιδιαίτερα μετά την προσθήκη μιας προσθήκης CORS στο Chrome. Θα συζητήσουμε επίσης στρατηγικές για την επίλυσή του ενώ εργάζεστε με το Swiggy API στο δικό σας Αντιδρώ εφαρμογές.

Επεξήγηση λύσεων για ζητήματα CORS στο React με το Swiggy API

Στην πρώτη λύση, δημιουργήσαμε ένα Node.js backend χρησιμοποιώντας το Express για να παρακάμψει το ζήτημα CORS κατά την ανάκτηση των δεδομένων του εστιατορίου από το API του Swiggy. Η πολιτική CORS αποτρέπει τα προγράμματα περιήγησης από το να υποβάλλουν αιτήματα σε διαφορετικό τομέα, εκτός εάν ο συγκεκριμένος τομέας το επιτρέπει. Δημιουργώντας έναν απλό διακομιστή, μπορούμε να λειτουργήσουμε ως μεσαίο επίπεδο μεταξύ του πελάτη και του API, φέρνοντας τα δεδομένα από την πλευρά του διακομιστή και επιστρέφοντάς τα στο front-end του React. Αυτή η μέθοδος αποφεύγει τα σφάλματα CORS, καθώς το αίτημα προέρχεται από την ίδια προέλευση με την εφαρμογή πελάτη.

Το backend Express ρυθμίζει προσαρμοσμένες κεφαλίδες, ιδιαίτερα το Access-Control-Allow-Origin, που επιτρέπει στον πελάτη μας να ζητήσει τους πόρους χωρίς να αντιμετωπίζει περιορισμούς CORS. Η κλήση ανάκτησης στο API του Swiggy γίνεται από την πλευρά του διακομιστή και τα δεδομένα επιστρέφονται σε μορφή JSON. Αυτή η προσέγγιση θεωρείται συχνά πιο ασφαλής και αποδοτική σε περιβάλλοντα παραγωγής, καθώς κρύβει κλειδιά API ή ευαίσθητες πληροφορίες. Επιπλέον, η χρήση του try-catch διασφαλίζει τον σωστό χειρισμό σφαλμάτων, εμφανίζοντας φιλικά προς το χρήστη μηνύματα σφάλματος εάν το API δεν ανταποκριθεί.

Στη δεύτερη λύση, τροποποιούμε το αίτημα ανάκτησης στον κώδικα React από την πλευρά του πελάτη. Αυτή η μέθοδος περιλαμβάνει την προσθήκη προσαρμοσμένων κεφαλίδων στην κλήση ανάκτησης, διασφαλίζοντας ότι το αίτημα έχει μορφοποιηθεί σωστά πριν φτάσει στο API. Χρησιμοποιούμε το React useEffect συνδέστε για να ενεργοποιήσετε την κλήση API κατά την προσάρτηση του στοιχείου. Η συνάρτηση async περιμένει την απόκριση API, τη μετατρέπει σε JSON και χειρίζεται σφάλματα εάν το αίτημα αποτύχει. Ωστόσο, αυτή η λύση εξακολουθεί να αντιμετωπίζει ζητήματα CORS εάν το API δεν επιτρέπει αιτήματα πολλαπλής προέλευσης από προγράμματα περιήγησης απευθείας.

Τέλος, στην τρίτη λύση, χρησιμοποιούμε μια υπηρεσία τρίτων που ονομάζεται CORS-Anywhere. Αυτή είναι μια υπηρεσία ενδιάμεσου λογισμικού που βοηθά προσωρινά στην παράκαμψη των περιορισμών CORS, αναδρομολογώντας το αίτημα API μέσω του διακομιστή τους. Αν και αυτή η λύση μπορεί να λειτουργήσει σε περιβάλλοντα ανάπτυξης, δεν συνιστάται για παραγωγή λόγω κινδύνων ασφαλείας και εξάρτησης από εξωτερικές υπηρεσίες. Εισάγει επίσης επιβάρυνση απόδοσης καθώς προσθέτει ένα επιπλέον επίπεδο στη διαδικασία ανάκτησης δεδομένων. Η χρήση αυτής της μεθόδου μπορεί να είναι βολική κατά τη διάρκεια των φάσεων δοκιμής, αλλά θα πρέπει να αποφεύγεται στην παραγωγή για λόγους ασφαλείας.

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 σε αιτήματα API

Ένας από τους βασικούς λόγους για το σφάλμα "Αποτυχία λήψης" σε μια εφαρμογή React, ειδικά όταν χρησιμοποιούνται API τρίτων κατασκευαστών όπως το Swiggy, είναι ΚΟΡΣ περιορισμοί (Κοινή χρήση πόρων μεταξύ προέλευσης). Το CORS είναι μια δυνατότητα ασφαλείας που περιορίζει τις εφαρμογές Ιστού από το να υποβάλλουν αιτήματα σε διαφορετικό τομέα από αυτόν από τον οποίο εξυπηρετήθηκαν. Σε αυτήν την περίπτωση, το Swiggy API απορρίπτει το αίτημα επειδή προέρχεται από διαφορετικό τομέα (την εφαρμογή React σας). Αυτό είναι ιδιαίτερα προβληματικό όταν λαμβάνετε δεδομένα από API που δεν υποστηρίζουν ρητά αιτήματα πολλαπλής προέλευσης.

Μια συνηθισμένη λύση είναι η χρήση επεκτάσεων προγράμματος περιήγησης όπως η επέκταση Chrome "Allow CORS". Ωστόσο, τέτοιες επεκτάσεις μπορεί να οδηγήσουν σε ασυνεπή αποτελέσματα. Αυτό συμβαίνει επειδή χειρίζονται ρυθμίσεις σε επίπεδο προγράμματος περιήγησης που δεν συγχρονίζονται πάντα σωστά με αιτήματα API. Αυτά τα πρόσθετα θα πρέπει ιδανικά να χρησιμοποιούνται μόνο για ανάπτυξη και όχι σε περιβάλλοντα παραγωγής. Για την παραγωγή, μια ασφαλέστερη και πιο αξιόπιστη προσέγγιση θα ήταν η χρήση ενός διακομιστή μεσολάβησης υποστήριξης που ζητά τα δεδομένα για λογαριασμό της εφαρμογής React, όπως φαίνεται στις λύσεις που παρέχονται προηγουμένως.

Μια άλλη πτυχή που πρέπει να λάβετε υπόψη είναι ο αποτελεσματικός χειρισμός των σφαλμάτων. Ενώ τα ζητήματα CORS είναι μια κοινή αιτία σφαλμάτων "Αποτυχία λήψης", άλλοι παράγοντες όπως η αστάθεια δικτύου, οι εσφαλμένες διευθύνσεις URL API ή ο χρόνος διακοπής λειτουργίας διακομιστή θα μπορούσαν επίσης να οδηγήσουν σε αυτό το σφάλμα. Ως εκ τούτου, είναι σημαντικό να εφαρμοστεί ισχυρός χειρισμός σφαλμάτων στον κώδικά σας, ειδικά όταν εργάζεστε με API τρίτων. Ένας σωστός μηχανισμός διαχείρισης σφαλμάτων θα βοηθήσει στην αποτελεσματικότερη διόρθωση του προβλήματος και θα παρέχει φιλικά προς τον χρήστη μηνύματα όταν κάτι πάει στραβά.