ReactJS: Sau khi thêm Plugin Chrome CORS, Từ chối chưa được xử lý (Lỗi Loại) Không thể tìm nạp

Xử lý lỗi API trong React: Thử thách plugin CORS

Khi làm việc với API trong ReactJS, các nhà phát triển thường gặp phải nhiều thách thức khác nhau liên quan đến việc tìm nạp dữ liệu, đặc biệt là khi xử lý API của bên thứ ba. Một vấn đề phổ biến phát sinh là lỗi "Từ chối chưa được xử lý (TypeError): Không tìm nạp được". Lỗi này có thể xảy ra ngay cả khi sử dụng các API phổ biến như API danh sách nhà hàng của Swiggy, API mà nhiều nhà phát triển sử dụng để nâng cao ứng dụng web của họ.

Trong trường hợp này, việc thêm tiện ích mở rộng CORS Chrome có vẻ như là một giải pháp khả thi để vượt qua các chính sách hạn chế của trình duyệt. Tuy nhiên, nó có thể gây ra những biến chứng mới thay vì giải quyết được vấn đề. Nếu bạn đang sử dụng plugin CORS trong môi trường phát triển và các yêu cầu API của bạn không thành công ngay sau khi tải, thì bạn có thể gặp phải sự cố trong đó plugin xung đột với hành vi xử lý yêu cầu của trình duyệt.

Hiểu cách quản lý các yêu cầu có nguồn gốc chéo và khắc phục sự cố lỗi CORS trong ReactJS là điều cần thiết để quá trình phát triển diễn ra suôn sẻ. Các API như Swiggy thường có các lớp bảo mật, chẳng hạn như CORS, để kiểm soát quyền truy cập từ các máy khách trái phép. Những hạn chế này có thể dẫn đến những lỗi cần được giải quyết đúng cách.

Trong hướng dẫn này, chúng tôi sẽ tìm hiểu lý do tại sao lỗi này xảy ra, đặc biệt là sau khi thêm plugin CORS trong Chrome. Chúng ta cũng sẽ thảo luận các chiến lược để giải quyết vấn đề này khi làm việc với API Swiggy trong Phản ứng ứng dụng.

Giải thích các giải pháp cho các vấn đề CORS trong React với API Swiggy

Trong giải pháp đầu tiên, chúng tôi đã tạo một Node.js phụ trợ bằng Express để khắc phục sự cố CORS khi tìm nạp dữ liệu nhà hàng từ API của Swiggy. Chính sách CORS ngăn trình duyệt gửi yêu cầu đến một miền khác trừ khi miền đó cho phép. Bằng cách tạo một máy chủ đơn giản, chúng ta có thể hoạt động như một lớp trung gian giữa máy khách và API, tìm nạp dữ liệu phía máy chủ và trả nó về giao diện người dùng React. Phương pháp này tránh được lỗi CORS vì yêu cầu có cùng nguồn gốc với ứng dụng khách.

Phần phụ trợ Express thiết lập các tiêu đề tùy chỉnh, đặc biệt là Kiểm soát truy cập-Cho phép-Xuất xứ, cho phép khách hàng của chúng tôi yêu cầu tài nguyên mà không gặp phải các hạn chế của CORS. Lệnh gọi tìm nạp tới API của Swiggy được thực hiện phía máy chủ và dữ liệu được trả về ở định dạng JSON. Cách tiếp cận này thường được coi là an toàn và hiệu quả hơn trong môi trường sản xuất vì nó ẩn các khóa API hoặc thông tin nhạy cảm. Hơn nữa, việc sử dụng try-catch đảm bảo xử lý lỗi thích hợp, hiển thị thông báo lỗi thân thiện với người dùng nếu API không phản hồi.

Trong giải pháp thứ hai, chúng tôi sửa đổi yêu cầu tìm nạp trên mã React phía máy khách. Phương pháp này bao gồm việc thêm các tiêu đề tùy chỉnh trong lệnh gọi tìm nạp, đảm bảo rằng yêu cầu được định dạng chính xác trước khi tiếp cận API. Chúng tôi sử dụng React sử dụngHiệu ứng hook để kích hoạt lệnh gọi API khi thành phần được gắn kết. Hàm async chờ phản hồi API, chuyển đổi nó thành JSON và xử lý lỗi nếu yêu cầu không thành công. Tuy nhiên, giải pháp này vẫn gặp phải vấn đề CORS nếu API không cho phép trực tiếp các yêu cầu có nguồn gốc chéo từ trình duyệt.

Cuối cùng, trong giải pháp thứ ba, chúng tôi sử dụng dịch vụ của bên thứ ba có tên CORS-Anywhere. Đây là dịch vụ phần mềm trung gian tạm thời giúp vượt qua các hạn chế của CORS bằng cách định tuyến lại yêu cầu API thông qua máy chủ của họ. Mặc dù giải pháp này có thể hoạt động trong môi trường phát triển nhưng nó không được khuyến khích sử dụng trong môi trường sản xuất do rủi ro bảo mật và sự phụ thuộc vào các dịch vụ bên ngoài. Nó cũng gây ra chi phí về hiệu suất vì nó thêm một lớp bổ sung vào quá trình tìm nạp dữ liệu. Sử dụng phương pháp này có thể thuận tiện trong giai đoạn thử nghiệm nhưng nên tránh sử dụng trong sản xuất vì lý do bảo mật.

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;

Khắc phục sự cố CORS trong yêu cầu API

Một trong những lý do cơ bản gây ra lỗi "Không tìm nạp được" trong ứng dụng React, đặc biệt là khi sử dụng API của bên thứ ba như Swiggy, là CORS (Chia sẻ tài nguyên chéo nguồn gốc). CORS là một tính năng bảo mật hạn chế các ứng dụng web gửi yêu cầu đến một miền khác với miền mà chúng được phục vụ. Trong trường hợp này, API Swiggy từ chối yêu cầu vì nó bắt nguồn từ một miền khác (ứng dụng React của bạn). Điều này đặc biệt có vấn đề khi bạn tìm nạp dữ liệu từ các API không hỗ trợ rõ ràng các yêu cầu có nguồn gốc chéo.

Một cách giải quyết phổ biến là sử dụng các tiện ích mở rộng của trình duyệt như tiện ích mở rộng Chrome "Cho phép CORS". Tuy nhiên, những phần mở rộng như vậy có thể dẫn đến kết quả không nhất quán. Điều này là do chúng thao túng các cài đặt cấp trình duyệt không phải lúc nào cũng đồng bộ hóa đúng cách với các yêu cầu API. Những plugin này lý tưởng nhất chỉ nên được sử dụng để phát triển chứ không phải trong môi trường sản xuất. Đối với sản xuất, cách tiếp cận an toàn và đáng tin cậy hơn sẽ là sử dụng máy chủ proxy phụ trợ yêu cầu dữ liệu thay mặt cho ứng dụng React của bạn, như đã thấy trong các giải pháp được cung cấp trước đó.

Một khía cạnh khác cần xem xét là xử lý lỗi một cách hiệu quả. Mặc dù sự cố CORS là nguyên nhân phổ biến gây ra lỗi "Không thể tìm nạp", nhưng các yếu tố khác như mạng không ổn định, URL API không chính xác hoặc thời gian ngừng hoạt động của máy chủ cũng có thể dẫn đến lỗi này. Do đó, điều quan trọng là phải thực hiện xử lý lỗi mạnh mẽ trong mã của bạn, đặc biệt là khi làm việc với API của bên thứ ba. Cơ chế xử lý lỗi phù hợp sẽ giúp gỡ lỗi vấn đề hiệu quả hơn và cung cấp các thông báo thân thiện với người dùng khi có sự cố.