ReactJS: после добавления плагина Chrome CORS не удалось получить необработанное отклонение (TypeError)

Обработка ошибок API в React: проблемы плагина CORS

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

В этом случае добавление расширения CORS Chrome может показаться жизнеспособным решением для обхода ограничительных политик браузера. Однако вместо решения проблемы это может привести к новым осложнениям. Если вы используете плагин CORS в своей среде разработки, и ваши запросы API завершаются сбоем вскоре после загрузки, вы можете столкнуться с проблемой, когда плагин конфликтует с поведением обработки запросов браузера.

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

В этом руководстве мы выясним, почему возникает эта ошибка, особенно после добавления плагина CORS в Chrome. Мы также обсудим стратегии решения этой проблемы при работе с API Swiggy в вашем Реагировать приложения.

Объяснение решений проблем CORS в React с помощью Swiggy API

В первом решении мы создали Node.js бэкэнд, использующий Express для обхода проблемы CORS при получении данных о ресторане из API Swiggy. Политика CORS не позволяет браузерам отправлять запросы к другому домену, если этот домен не разрешает это. Создав простой сервер, мы можем действовать как промежуточный уровень между клиентом и API, получая данные на стороне сервера и возвращая их во внешний интерфейс React. Этот метод позволяет избежать ошибок CORS, поскольку запрос поступает из того же источника, что и клиентское приложение.

Серверная часть Express настраивает пользовательские заголовки, в частности Доступ-Контроль-Разрешить-Происхождение, что позволяет нашему клиенту запрашивать ресурсы, не сталкиваясь с ограничениями CORS. Вызов выборки API Swiggy выполняется на стороне сервера, и данные возвращаются в формате JSON. Этот подход часто считается более безопасным и производительным в производственных средах, поскольку он скрывает ключи API или конфиденциальную информацию. Кроме того, использование try-catch обеспечивает правильную обработку ошибок, отображая удобные для пользователя сообщения об ошибках, если API не отвечает.

Во втором решении мы модифицируем запрос на выборку в коде React на стороне клиента. Этот метод включает добавление пользовательских заголовков в вызов выборки, гарантируя, что запрос будет правильно отформатирован перед достижением API. Мы используем React использованиеЭффект перехватчик для запуска вызова 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 — это функция безопасности, которая запрещает веб-приложениям отправлять запросы в домен, отличный от того, из которого они были обслуживаются. В этом случае API Swiggy отклоняет запрос, поскольку он исходит из другого домена (вашего приложения React). Это особенно проблематично, когда вы извлекаете данные из API, которые явно не поддерживают запросы между источниками.

Распространенным обходным решением является использование расширений браузера, таких как расширение Chrome «Разрешить CORS». Однако такие расширения могут привести к противоречивым результатам. Это связано с тем, что они манипулируют настройками на уровне браузера, которые не всегда должным образом синхронизируются с запросами API. Эти плагины в идеале следует использовать только для разработки, а не в производственной среде. Для производства более безопасным и надежным подходом было бы использование внутреннего прокси-сервера, который запрашивает данные от имени вашего приложения React, как показано в решениях, предоставленных ранее.

Еще один аспект, который следует учитывать, — это эффективная обработка ошибок. Хотя проблемы CORS являются распространенной причиной ошибок «Не удалось получить», другие факторы, такие как нестабильность сети, неправильные URL-адреса API или простои сервера, также могут привести к этой ошибке. Следовательно, важно реализовать надежная обработка ошибок в вашем коде, особенно при работе со сторонними API. Надлежащий механизм обработки ошибок поможет более эффективно устранить проблему и предоставить удобные для пользователя сообщения, если что-то пойдет не так.