Как правильно сделать прокси для запроса на API?

Для создания прокси-сервера для запросов к API в React, можно использовать инструменты, такие как Express.js и http-proxy-middleware.

Вот пошаговая инструкция о том, как это сделать:

Шаг 1: Установка зависимостей
Сначала, вам потребуется установить Express.js и http-proxy-middleware. Вы можете сделать это с помощью npm, запустив команду:

npm install express http-proxy-middleware --save

Шаг 2: Создание прокси-сервера
Создайте новый файл с именем proxy.js в корневой папке вашего проекта. Внутри этого файла импортируйте и настройте Express.js и http-proxy-middleware. Пример кода может выглядеть так:

const express = require('express');
const { createProxyMiddleware } = require('http-proxy-middleware');

const app = express();

// Настройка прокси-сервера
app.use(
  '/api',
  createProxyMiddleware({
    target: 'http://api.example.com', // Целевой API-сервер
    changeOrigin: true, // Изменить исходное значение заголовка «Host» на целевой сервер
    pathRewrite: {
      '^/api': '', // Удалить базовый путь /api из URL
    },
  })
);

// Ваш код Express.js для обслуживания других маршрутов или статических файлов

// Запуск прокси-сервера на порту 3000
app.listen(3000, () => {
  console.log('Прокси-сервер работает на порту 3000');
});

Шаг 3: Запуск прокси-сервера
Чтобы запустить прокси-сервер, выполните следующую команду в корневой папке вашего проекта:

node proxy.js

Это запустит Express.js-сервер на порту 3000 и прокси-сервер будет доступен по адресу http://localhost:3000.

Шаг 4: Использование прокси-сервера в React
Теперь, когда прокси-сервер работает, вы можете использовать его в своем проекте React для выполнения запросов к API. Вместо того чтобы указывать полный URL API-сервера, вы можете использовать относительный путь /api для совершения запросов. Например:

fetch('/api/data') // Запрос к http://api.example.com/data через прокси-сервер
  .then((response) => response.json())
  .then((data) => {
    // Обработка полученных данных
  })
  .catch((error) => {
    // Обработка ошибок
  });

Таким образом, прокси-сервер будет перенаправлять запросы к http://api.example.com/data и возвращать ответы обратно в ваше react-приложение.