ReactJS: Selepas Menambahkan Pemalam CORS Chrome, Penolakan Tidak Terkendali (TypeError) Gagal Diambil

Mengendalikan Ralat API dalam React: CORS Plugin Challenges

Apabila bekerja dengan API dalam ReactJS, pembangun sering menghadapi pelbagai cabaran yang berkaitan dengan pengambilan data, terutamanya apabila berurusan dengan API pihak ketiga. Satu isu biasa yang timbul ialah ralat "Penolakan Tidak Terkendali (TypeError): Gagal mengambil". Ralat ini boleh berlaku walaupun semasa menggunakan API popular seperti API senarai restoran Swiggy, yang digunakan oleh ramai pembangun untuk meningkatkan aplikasi web mereka.

Dalam kes ini, menambah sambungan Chrome CORS mungkin kelihatan seperti penyelesaian yang berdaya maju untuk memintas dasar penyemak imbas yang terhad. Walau bagaimanapun, ia mungkin memperkenalkan komplikasi baharu dan bukannya menyelesaikan isu tersebut. Jika anda menggunakan pemalam CORS dalam persekitaran pembangunan anda, dan permintaan API anda gagal sejurus selepas dimuatkan, anda mungkin menghadapi masalah apabila pemalam itu bercanggah dengan gelagat pengendalian permintaan penyemak imbas.

Memahami cara mengurus permintaan silang asal dan menyelesaikan masalah ralat CORS dalam ReactJS adalah penting untuk proses pembangunan yang lancar. API seperti Swiggy selalunya mempunyai lapisan keselamatan, seperti CORS, untuk mengawal akses daripada pelanggan yang tidak dibenarkan. Sekatan ini boleh menyebabkan ralat yang perlu ditangani dengan betul.

Dalam panduan ini, kami akan meneroka sebab ralat ini berlaku, terutamanya selepas menambah pemalam CORS dalam Chrome. Kami juga akan membincangkan strategi untuk menyelesaikannya semasa bekerja dengan Swiggy API dalam anda Bertindak balas aplikasi.

Menjelaskan Penyelesaian untuk Isu CORS dalam React dengan Swiggy API

Dalam penyelesaian pertama, kami mencipta a Node.js bahagian belakang menggunakan Express untuk memintas isu CORS apabila mengambil data restoran daripada API Swiggy. Dasar CORS menghalang penyemak imbas daripada membuat permintaan kepada domain lain melainkan domain itu membenarkannya. Dengan mencipta pelayan ringkas, kami boleh bertindak sebagai lapisan tengah antara klien dan API, mengambil bahagian pelayan data dan mengembalikannya ke bahagian hadapan React. Kaedah ini mengelakkan ralat CORS kerana permintaan datang dari asal yang sama dengan apl klien.

Bahagian belakang Express menyediakan pengepala tersuai, terutamanya Access-Control-Allow-Origin, yang membolehkan pelanggan kami meminta sumber tanpa menghadapi sekatan CORS. Panggilan ambil ke API Swiggy dibuat di sebelah pelayan dan data dikembalikan dalam format JSON. Pendekatan ini selalunya dianggap lebih selamat dan berprestasi dalam persekitaran pengeluaran kerana ia menyembunyikan kunci API atau maklumat sensitif. Tambahan pula, penggunaan try-catch memastikan pengendalian ralat yang betul, memaparkan mesej ralat mesra pengguna jika API gagal bertindak balas.

Dalam penyelesaian kedua, kami mengubah suai permintaan pengambilan pada kod React sisi klien. Kaedah ini melibatkan penambahan pengepala tersuai dalam panggilan pengambilan, memastikan permintaan diformatkan dengan betul sebelum mencapai API. Kami menggunakan React's useEffect cangkuk untuk mencetuskan panggilan API apabila komponen dipasang. Fungsi async menunggu respons API, menukarnya kepada JSON dan mengendalikan ralat jika permintaan gagal. Walau bagaimanapun, penyelesaian ini masih menghadapi isu CORS jika API tidak membenarkan permintaan silang asal daripada penyemak imbas secara langsung.

Akhir sekali, dalam penyelesaian ketiga, kami menggunakan perkhidmatan pihak ketiga yang dipanggil CORS-Anywhere. Ini ialah perkhidmatan middleware yang membantu memintas sekatan CORS buat sementara waktu dengan mengubah hala permintaan API melalui pelayan mereka. Walaupun penyelesaian ini boleh berfungsi dalam persekitaran pembangunan, ia tidak disyorkan untuk pengeluaran kerana risiko keselamatan dan pergantungan pada perkhidmatan luaran. Ia juga memperkenalkan overhed prestasi kerana ia menambah lapisan tambahan pada proses pengambilan data. Menggunakan kaedah ini boleh menjadi mudah semasa fasa ujian tetapi harus dielakkan dalam pengeluaran atas sebab keselamatan.

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;

Menyelesaikan masalah Isu CORS dalam Permintaan API

Salah satu sebab asas ralat "Gagal untuk mengambil" dalam aplikasi React, terutamanya apabila menggunakan API pihak ketiga seperti Swiggy, ialah CORS (Perkongsian Sumber Silang Asal) sekatan. CORS ialah ciri keselamatan yang mengehadkan aplikasi web daripada membuat permintaan ke domain yang berbeza daripada domain yang digunakan. Dalam kes ini, Swiggy API menolak permintaan kerana ia berasal daripada domain yang berbeza (apl React anda). Ini amat bermasalah apabila anda mengambil data daripada API yang tidak menyokong permintaan silang asal secara eksplisit.

Penyelesaian biasa ialah menggunakan sambungan penyemak imbas seperti sambungan Chrome "Benarkan CORS". Walau bagaimanapun, sambungan sedemikian boleh membawa kepada hasil yang tidak konsisten. Ini kerana mereka memanipulasi tetapan peringkat penyemak imbas yang tidak sentiasa disegerakkan dengan betul dengan permintaan API. Pemalam ini sepatutnya digunakan hanya untuk pembangunan dan bukan dalam persekitaran pengeluaran. Untuk pengeluaran, pendekatan yang lebih selamat dan lebih dipercayai akan menggunakan pelayan proksi bahagian belakang yang meminta data bagi pihak apl React anda, seperti yang dilihat dalam penyelesaian yang disediakan sebelum ini.

Satu lagi aspek yang perlu dipertimbangkan ialah mengendalikan ralat dengan berkesan. Walaupun isu CORS adalah punca biasa ralat "Gagal mengambil", faktor lain seperti ketidakstabilan rangkaian, URL API yang salah atau masa henti pelayan juga boleh mengakibatkan ralat ini. Oleh itu, penting untuk dilaksanakan pengendalian ralat yang mantap dalam kod anda, terutamanya apabila bekerja dengan API pihak ketiga. Mekanisme pengendalian ralat yang betul akan membantu menyahpepijat isu dengan lebih berkesan dan menyediakan mesej mesra pengguna apabila berlaku masalah.