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

Что такое Vite Proxy и зачем он нужен с Axios?

При разработке фронтенд-приложений на Vite часто возникает проблема CORS (Cross-Origin Resource Sharing) при обращении к API. Вот где в игру входит прокси-сервер Vite: он перенаправляет запросы с фронтенда на бэкенд-сервер, обходя ограничения браузера. Axios — популярная HTTP-библиотека для выполнения таких запросов. Их комбинация решает ключевые задачи:

• Избегание CORS-ошибок в development-режиме
• Упрощение URL (относительные пути вместо полных адресов API)
• Централизованное управление запросами
• Безопасная работа с куками и аутентификацией

Пошаговая настройка прокси в vite.config.js

Настройка занимает менее 5 минут. Создайте/измените файл vite.config.js:

1. Установите необходимые зависимости: npm install axios
2. Добавьте блок server.proxy в конфиг:

// vite.config.js
export default {
  server: {
    proxy: {
      '/api': {
        target: 'http://your-backend-domain.com',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^/api/, '')
      }
    }
  }
}

Ключевые параметры:

• target: URL вашего API-сервера
• changeOrigin: изменяет заголовок Origin (обязательно true для CORS)
• rewrite: переписывает путь (удаляет префикс /api)

Интеграция Axios с Vite Proxy: практические примеры

Создайте экземпляр Axios с базовым URL:

// src/api.js
import axios from 'axios';

export default axios.create({
  baseURL: '/api', // совпадает с префиксом в proxy
  timeout: 5000
});

Пример GET-запроса:

// В компоненте Vue/React
import api from './api';

const fetchData = async () => {
  try {
    const response = await api.get('/users'); // Фактический запрос: /api/users → your-backend-domain.com/users
    console.log(response.data);
  } catch (error) {
    console.error('Ошибка:', error);
  }
};

Для POST-запросов:

api.post('/login', {
  username: 'test',
  password: 'secret'
});

Типичные проблемы и решения

• Прокси не работает:
  Проверьте совпадение префикса (/api), перезапустите сервер (npm run dev), убедитесь что target доступен.
• Ошибка 404:
  Отключите rewrite если бэкенд требует префикс, или настройте его корректно.
• Куки не передаются:
  Добавьте cookieDomainRewrite: '' в конфиг прокси.
• Медленные запросы:
  Проверьте сетевые задержки, используйте configure для тонкой настройки.

Часто задаваемые вопросы (FAQ)

Q: Работает ли прокси в production-сборке?
A: Нет. Прокси Vite активен только в dev-режиме (npm run dev). Для production настройте Nginx или аналоги.

Q: Как обрабатывать несколько API-эндпоинтов?
A: Добавьте несколько правил в proxy:

proxy: {
  '/api': { target: 'https://api1.com' },
  '/images': { target: 'https://cdn.com' }
}

Q: Можно ли использовать с WebSocket?
A: Да. Добавьте ws: true в конфиг прокси для WebSocket-маршрутов.

Q: Альтернативы Axios для Vite?
A: Fetch API или библиотеки типа ky. Но Axios удобнее для перехватчиков и обработки ошибок.

Q: Как тестировать с прокси?
A: Используйте моки (vitest) или запускайте тесты с флагом --mode test и отдельным конфигом прокси.