Как работать с двумя разными API с React?

Мне нужно протестировать одну конечную точку внутри API, но я уже работаю с одним API, и я не хотел бы менять все мои вызовы, ориентируясь только на новый API.

Я не знаю событие, если это возможно, но есть ли способ определить более одного proxy внутри package.json?

Есть ли способ передать ключи авторизации внутри package.json?

Основным сервером является локальный сервер с прокси:

"proxy": {
    "/api": {
      "target": "http://localhost:3001/proxy",
      "changeOrigin": true,
      "pathRewrite": {
        "^/api": ""
      }
    }
  },

В настоящее время я использую axios сделать вызовы API, и проект был запущен с react-create-app,

Источник

1 ответ

Решение

Я нашел решение, добавив второй прокси после первого, внутри proxy и мне не нужно было тоже ставить заголовки внутри package.json, но ссылки, которыми поделился @Chase DeAnda, действительно интересны и могут помочь тем, кто заинтересован: заголовки Webpack и перехватчики axios.

Источник

В package.json вы можете настроить прокси-сервер для отправки запросов API к различным целям на основе обработки шаблона для различных запросов API, как показано ниже.

Что следует отметить:

  • Порядок шаблонов API имеет значение, общий запрос (*) должен быть последним.
  • Регулярное выражение должно быть таким, чтобы оно соответствовало полному URL, частичное совпадение привело к ошибкам для меня.

Следующий кусок кода работал для меня. Есть 3 разных сервера, один для запроса отчетов, один для запроса контроля доступа, а остальные все запросы должны идти на третий сервер.

"proxy": {
    "/report/.*(_get)": {
      "target": "http://localhost:8093/"
    },
    "/access/.*(_get)": {
      "target": "http://localhost:8091/"
    },
    "/.*": {
      "target": "https://egov-micro-dev.egovernments.org/",
      "changeOrigin": true
    }
  },

Надеюсь это поможет.

Источник
Другие вопросы по тегам