ReactJS: Setelah Menambahkan Plugin Chrome CORS, Penolakan yang Tidak Tertangani (TypeError) Gagal Mengambil

Menangani Kesalahan API di React: Tantangan Plugin CORS

Saat bekerja dengan API di ReactJS, pengembang sering kali menghadapi berbagai tantangan terkait pengambilan data, terutama saat berhadapan dengan API pihak ketiga. Salah satu masalah umum yang muncul adalah kesalahan "Penolakan Tidak Tertangani (TypeError): Gagal mengambil". Kesalahan ini dapat terjadi bahkan ketika menggunakan API populer seperti API daftar restoran Swiggy, yang digunakan banyak pengembang untuk menyempurnakan aplikasi web mereka.

Dalam hal ini, menambahkan ekstensi CORS Chrome mungkin tampak seperti solusi yang tepat untuk melewati kebijakan browser yang membatasi. Namun, hal ini mungkin menimbulkan komplikasi baru dan bukannya menyelesaikan masalah. Jika Anda menggunakan plugin CORS di lingkungan pengembangan, dan permintaan API Anda gagal segera setelah memuat, Anda mungkin mengalami masalah saat plugin tersebut bertentangan dengan perilaku penanganan permintaan browser.

Memahami cara mengelola permintaan lintas asal dan memecahkan masalah kesalahan CORS di ReactJS sangat penting untuk kelancaran proses pengembangan. API seperti Swiggy sering kali memiliki lapisan keamanan, seperti CORS, untuk mengontrol akses dari klien yang tidak sah. Pembatasan ini dapat menimbulkan kesalahan yang perlu diatasi dengan baik.

Dalam panduan ini, kita akan membahas mengapa kesalahan ini terjadi, terutama setelah menambahkan plugin CORS di Chrome. Kami juga akan membahas strategi untuk mengatasinya saat bekerja dengan Swiggy API di Anda Bereaksi aplikasi.

Menjelaskan Solusi Masalah CORS di React dengan Swiggy API

Dalam solusi pertama, kami membuat a Node.js backend menggunakan Express untuk mengatasi masalah CORS saat mengambil data restoran dari API Swiggy. Kebijakan CORS mencegah browser membuat permintaan ke domain lain kecuali domain tersebut mengizinkannya. Dengan membuat server sederhana, kita dapat bertindak sebagai lapisan tengah antara klien dan API, mengambil data di sisi server dan mengembalikannya ke front-end React. Metode ini menghindari kesalahan CORS karena permintaan berasal dari asal yang sama dengan aplikasi klien.

Backend Express menyiapkan header khusus, khususnya Akses-Kontrol-Izinkan-Asal, yang memungkinkan klien kami meminta sumber daya tanpa menghadapi batasan CORS. Panggilan pengambilan ke API Swiggy dilakukan di sisi server, dan data dikembalikan dalam format JSON. Pendekatan ini sering kali dianggap lebih aman dan berkinerja baik di lingkungan produksi karena menyembunyikan kunci API atau informasi sensitif. Selain itu, penggunaan try-catch memastikan penanganan kesalahan yang tepat, menampilkan pesan kesalahan yang mudah digunakan jika API gagal merespons.

Pada solusi kedua, kami memodifikasi permintaan pengambilan pada kode React sisi klien. Metode ini melibatkan penambahan header khusus dalam panggilan pengambilan, memastikan bahwa permintaan diformat dengan benar sebelum mencapai API. Kami menggunakan React gunakanEffect hook untuk memicu panggilan API saat komponen dipasang. Fungsi async menunggu respons API, mengubahnya menjadi JSON, dan menangani kesalahan jika permintaan gagal. Namun, solusi ini masih menghadapi masalah CORS jika API tidak mengizinkan permintaan lintas asal dari browser secara langsung.

Terakhir, pada solusi ketiga, kami menggunakan layanan pihak ketiga yang disebut CORS-Anywhere. Ini adalah layanan middleware yang untuk sementara membantu melewati batasan CORS dengan merutekan ulang permintaan API melalui server mereka. Meskipun solusi ini dapat berfungsi di lingkungan pengembangan, solusi ini tidak disarankan untuk produksi karena risiko keamanan dan ketergantungan pada layanan eksternal. Ini juga menimbulkan overhead kinerja karena menambahkan lapisan tambahan ke proses pengambilan data. Penggunaan metode ini mungkin nyaman selama tahap pengujian tetapi harus dihindari dalam produksi karena alasan keamanan.

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;

Memecahkan Masalah CORS dalam Permintaan API

Salah satu alasan mendasar terjadinya kesalahan "Gagal mengambil" di aplikasi React, terutama saat menggunakan API pihak ketiga seperti Swiggy, adalah KOR (Berbagi Sumber Daya Lintas Asal). CORS adalah fitur keamanan yang membatasi aplikasi web membuat permintaan ke domain yang berbeda dari domain tempat permintaan tersebut dilayani. Dalam hal ini, Swiggy API menolak permintaan tersebut karena berasal dari domain yang berbeda (aplikasi React Anda). Hal ini khususnya menjadi masalah ketika Anda mengambil data dari API yang tidak secara eksplisit mendukung permintaan lintas asal.

Solusi umum adalah menggunakan ekstensi browser seperti ekstensi Chrome "Izinkan CORS". Namun, perluasan tersebut dapat menyebabkan hasil yang tidak konsisten. Hal ini karena mereka memanipulasi pengaturan tingkat browser yang tidak selalu tersinkronisasi dengan baik dengan permintaan API. Plugin ini idealnya hanya digunakan untuk pengembangan dan bukan di lingkungan produksi. Untuk produksi, pendekatan yang lebih aman dan andal adalah menggunakan server proxy backend yang meminta data atas nama aplikasi React Anda, seperti yang terlihat pada solusi yang diberikan sebelumnya.

Aspek lain yang perlu dipertimbangkan adalah menangani kesalahan secara efektif. Meskipun masalah CORS adalah penyebab umum kesalahan "Gagal mengambil", faktor lain seperti ketidakstabilan jaringan, URL API yang salah, atau waktu henti server juga dapat menyebabkan kesalahan ini. Oleh karena itu, penting untuk diterapkan penanganan kesalahan yang kuat dalam kode Anda, terutama saat bekerja dengan API pihak ketiga. Mekanisme penanganan kesalahan yang tepat akan membantu men-debug masalah dengan lebih efektif dan memberikan pesan yang mudah digunakan ketika terjadi kesalahan.