Настройка аутентификации для прокси-сервера Vite: Полное руководство с примерами

Что такое Vite Server Proxy и зачем ему аутентификация?

Vite — современный инструмент для фронтенд-разработки, ускоряющий сборку проектов. Его прокси-сервер перенаправляет запросы во время разработки, помогая обходить CORS-ошибки. Но когда бэкенд требует авторизации, настройка vite server proxy auth становится критичной. Без неё разработчики сталкиваются с ошибками 401/403, блокирующими доступ к API.

Базовая настройка прокси в Vite

Добавьте в vite.config.js секцию server.proxy:

export default {
  server: {
    proxy: {
      '/api': {
        target: 'https://backend.example.com',
        changeOrigin: true
      }
    }
  }
}

Этот код:

• Перенаправляет все запросы к /api на удалённый сервер
• changeOrigin заменяет заголовок Origin для обхода CORS
• Работает с любым HTTP-методом (GET, POST и др.)

Реализация аутентификации в прокси Vite

Для интеграции защиты используйте опцию configure в прокси-объекте. Рассмотрим популярные методы:

Базовая HTTP-аутентификация

proxy: {
  '/api': {
    target: 'https://secure-api.com',
    configure: (proxy) => {
      proxy.on('proxyReq', (req) => {
        req.setHeader('Authorization', 'Basic ' + Buffer.from('user:pass').toString('base64'))
      })
    }
  }
}

Аутентификация через Bearer Token

configure: (proxy) => {
  proxy.on('proxyReq', (req) => {
    req.setHeader('Authorization', 'Bearer YOUR_ACCESS_TOKEN')
  })
}

Динамическая аутентификация и продвинутые сценарии

Для гибких решений:

• Переменные окружения: Храните логин/пароль в .env-файле
• Интеграция с OAuth 2.0: Добавляйте refresh-токены через хуки
• Кастомные заголовки: Передавайте X-API-Key через headers в конфиге

Типичные ошибки и их решение

• Ошибка 401: Проверьте корректность токена/логина. Убедитесь, что заголовки отправляются
• Сброс подключения: Отключите HTTPS верификацию через secure: false для тестовых серверов
• Заголовки не применяются: Используйте proxy.on() вместо статического задания headers

FAQ: Vite Server Proxy Auth

Как передать куки через прокси?

Добавьте cookieDomainRewrite: '' и withCredentials: true в конфигурацию прокси.

Можно ли использовать несколько прокси с разной аутентификацией?

Да! Создайте отдельные объекты для каждого пути:

proxy: {
  '/api': { /* конфиг 1 */ },
  '/auth': { /* конфиг 2 */ }
}

Безопасно ли хранить учётные данные в vite.config.js?

Нет. Всегда используйте .env-файлы, добавленные в .gitignore. Для production используйте серверные middleware.

Почему прокси не применяет заголовки аутентификации?

Убедитесь, что используете событие proxyReq, а не proxyRes. Проверьте порядок middleware в цепочке.

Как отладить прокси-запросы?

Включите логирование:

configure: (proxy) => {
  proxy.on('error', (err) => console.error(err))
  proxy.on('proxyReq', (req) => console.log(req.method, req.path))
}