ReactJS: після додавання плагіна Chrome CORS не вдалося отримати необроблене відхилення (TypeError)

Обробка помилок API у React: виклики плагіна CORS

При роботі з API в ReactJS, розробники часто стикаються з різними проблемами, пов’язаними з отриманням даних, особливо коли вони мають справу зі сторонніми API. Однією з поширених проблем, яка виникає, є помилка «Необроблене відхилення (TypeError): помилка отримання». Ця помилка може виникнути навіть під час використання популярних API, таких як API списку ресторанів Swiggy, який багато розробників використовують для вдосконалення своїх веб-додатків.

У цьому випадку додавання розширення CORS Chrome може здатися життєздатним рішенням для обходу обмежувальних політик браузера. Однак це може створити нові ускладнення замість вирішення проблеми. Якщо ви використовуєте плагін CORS у своєму середовищі розробки, і ваші запити API не виконуються незабаром після завантаження, ви можете зіткнутися з проблемою, через яку плагін конфліктує з поведінкою браузера при обробці запитів.

Розуміння того, як керувати перехресними запитами та вирішувати проблеми Помилки CORS у ReactJS необхідний для плавного процесу розробки. Такі API, як Swiggy, часто мають рівні безпеки, такі як CORS, для контролю доступу неавторизованих клієнтів. Ці обмеження можуть призвести до помилок, які необхідно усунути належним чином.

У цьому посібнику ми з’ясуємо, чому виникає ця помилка, особливо після додавання плагіна CORS у Chrome. Ми також обговоримо стратегії її вирішення під час роботи з Swiggy API у вашому Реагувати програми.

Пояснення рішень для проблем CORS у React за допомогою Swiggy API

У першому рішенні ми створили a Node.js бекенда за допомогою Express, щоб обійти проблему CORS під час отримання даних ресторану з API Swiggy. Політика CORS забороняє браузерам робити запити до іншого домену, якщо цей домен не дозволяє це. Створивши простий сервер, ми можемо діяти як проміжний рівень між клієнтом і API, забираючи дані на стороні сервера та повертаючи їх до інтерфейсу React. Цей метод дозволяє уникнути помилок CORS, оскільки запит надходить із того самого джерела, що й клієнтська програма.

Сервер Express налаштовує спеціальні заголовки, зокрема Access-Control-Allow-Origin, що дозволяє нашому клієнту запитувати ресурси, не стикаючись із обмеженнями CORS. Виклик fetch до API Swiggy виконується на стороні сервера, а дані повертаються у форматі JSON. Цей підхід часто вважається більш безпечним і продуктивним у виробничих середовищах, оскільки він приховує ключі API або конфіденційну інформацію. Крім того, використання try-catch забезпечує правильну обробку помилок, відображаючи зручні повідомлення про помилки, якщо API не відповідає.

У другому рішенні ми змінюємо запит на вибірку в коді React на стороні клієнта. Цей метод передбачає додавання користувацьких заголовків у виклик fetch, гарантуючи, що запит правильно відформатований перед досягненням 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 Обмеження (Cross-Origin Resource Sharing). CORS — це функція безпеки, яка забороняє веб-додаткам надсилати запити до домену, відмінного від того, з якого вони обслуговуються. У цьому випадку API Swiggy відхиляє запит, оскільки він походить з іншого домену (вашої програми React). Це особливо проблематично, коли ви отримуєте дані з API, які явно не підтримують перехресні запити.

Загальним обхідним шляхом є використання розширень веб-переглядача, як-от розширення Chrome «Дозволити CORS». Однак такі розширення можуть призвести до суперечливих результатів. Це тому, що вони маніпулюють налаштуваннями на рівні браузера, які не завжди належним чином синхронізуються із запитами API. В ідеалі ці плагіни слід використовувати лише для розробки, а не у виробничих середовищах. Для виробництва безпечнішим і надійнішим підходом було б використання внутрішнього проксі-сервера, який запитує дані від імені вашого додатка React, як це видно в наданих раніше рішеннях.

Ще один аспект, який слід враховувати, — це ефективна обробка помилок. Хоча проблеми з CORS є поширеною причиною помилок «Не вдалося отримати», інші фактори, як-от нестабільність мережі, неправильні URL-адреси API або простої сервера, також можуть призвести до цієї помилки. Тому це важливо впроваджувати надійна обробка помилок у вашому коді, особливо під час роботи зі сторонніми API. Належний механізм обробки помилок допоможе ефективніше усунути проблему та надасть зручні повідомлення, коли щось піде не так.