Vite — это невероятно быстрый инструмент для создания современных веб-приложений. Он поставляется со встроенным сервером разработки, который позволяет быстро разрабатывать и создавать прототипы ваших проектов. Одной из важнейших функций сервера разработки является возможность настройки прокси-сервера, который позволяет перенаправлять запросы на другой сервер или API во время разработки. В этой статье мы рассмотрим несколько методов настройки прокси-сервера в Vite, а также приведем примеры кода.

Метод 1: использование поля «прокси» в vite.config.js
Самый простой способ настроить прокси в Vite — использовать поле «прокси» в vite.config.jsфайл. Вот пример:

// vite.config.js
module.exports = {
  proxy: {
    '/api': {
      target: 'http://api.example.com',
      changeOrigin: true,
      rewrite: (path) => path.replace(/^\/api/, ''),
    },
  },
};

В этом примере любой запрос, начинающийся с /api, будет перенаправлен на http://api.example.com. Параметр changeOriginгарантирует, что заголовок Hostтакже будет перезаписан, а функция rewriteудаляет префикс /apiиз путь запроса.

Метод 2: использование промежуточного программного обеспечения Vite Proxy
Vite также позволяет настраивать прокси-сервер с использованием специального промежуточного программного обеспечения. Этот метод дает вам больше гибкости и контроля над конфигурацией прокси. Вот пример использования http-proxy-middleware:

// vite.config.js
const { createProxyMiddleware } = require('http-proxy-middleware');
module.exports = {
  configureServer: {
    middlewares: [
      createProxyMiddleware('/api', {
        target: 'http://api.example.com',
        changeOrigin: true,
        pathRewrite: {
          '^/api': '',
        },
      }),
    ],
  },
};

В этом примере мы используем функцию createProxyMiddlewareдля создания специального промежуточного программного обеспечения, которое перенаправляет запросы, начинающиеся с /api, на http://api.example.com. Параметр pathRewriteудаляет префикс /apiиз пути запроса.

Метод 3: использование прокси-сервера плагина Vite
Если вы предпочитаете подход на основе плагинов, вы можете использовать плагин «vite-plugin-proxy». Сначала установите плагин:

npm install vite-plugin-proxy --save-dev

Затем добавьте его к своим vite.config.js:

// vite.config.js
const { createProxy } = require('vite-plugin-proxy');
module.exports = {
  plugins: [
    createProxy({
      '/api': {
        target: 'http://api.example.com',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, ''),
      },
    }),
  ],
};

Этот плагин обеспечивает более понятный и декларативный способ настройки прокси-сервера в Vite.

Настройка прокси-сервера в Vite имеет решающее значение для бесперебойной разработки и тестирования веб-приложений. В этой статье мы рассмотрели три различных метода настройки прокси-сервера в Vite: использование поля «прокси» в vite.config.js, использование промежуточного программного обеспечения прокси-сервера Vite и использование прокси-сервера плагина Vite. Каждый метод имеет свои преимущества и может быть выбран в зависимости от ваших конкретных требований. Используя эти методы настройки прокси-сервера, вы можете эффективно перенаправлять запросы во время разработки и обеспечивать бесперебойную связь между вашими внешними и внутренними системами.