Настройка Vite Proxy Server для решения CORS ошибок: Полное руководство

Что такое Vite Proxy Server и зачем он нужен для CORS?

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

Как настроить прокси-сервер в Vite для обхода CORS

Настройка выполняется в vite.config.js. Рассмотрим базовые шаги:

1. Установите необходимые зависимости: npm install http-proxy
2. Добавьте секцию server.proxy в конфигурационный файл
3. Определите правила перенаправления для целевых API-эндпоинтов

Пример минимальной конфигурации:

// vite.config.js
export default {
  server: {
    proxy: {
      '/api': {
        target: 'https://ваш-сервер.com',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^/api/, '')
      }
    }
  }
}

Практические примеры конфигурации прокси

Сценарий 1: Базовый прокси для REST API

proxy: {
  '/users': {
    target: 'https://api.example.com',
    changeOrigin: true,
    secure: false
  }
}

Сценарий 2: Прокси с перезаписью путей

proxy: {
  '/graphql': {
    target: 'https://api.service.io/v2',
    rewrite: (path) => path.replace('/graphql', '/query')
  }
}

Сценарий 3: Несколько эндпоинтов

proxy: {
  '/api': { target: 'https://backend.com' },
  '/images': { target: 'https://cdn.provider.net' }
}

Типичные ошибки и отладка прокси

• Ошибка 404: Проверьте соответствие пути в rewrite
• Сертификаты SSL: Для HTTPS используйте secure: false в development
• Заголовки: Добавьте headers: { 'Access-Control-Allow-Origin': '*' } при необходимости

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

1. Почему прокси Vite не работает с CORS в production?

Прокси Vite работает только в development-режиме. Для production используйте настройки CORS на бэкенд-сервере или NGINX.

2. Как проверить, что прокси активен?

Запустите сервер командой vite и проверьте Network-вкладку в DevTools: запросы к /api должны показывать Origin как localhost.

3. Можно ли использовать прокси для WebSockets?

Да, добавьте опцию ws: true в конфигурацию прокси.

4. Как обрабатывать куки через прокси?

Включите cookieDomainRewrite: 'localhost' и установите withCredentials: true в запросах.

5. Альтернативы proxy в Vite?

Для сложных сценариев используйте:

• Плагин vite-plugin-proxy
• Настройку CORS на бэкенде
• Расширения браузера для отключения CORS (только для разработки)

Правильная настройка proxy в Vite устраняет проблемы CORS, ускоряя разработку. Тестовые запросы к API становятся безопасными, а код клиента остаётся чистым. Обновляйте конфигурацию при изменении API-эндпоинтов и всегда проверяйте работу в разных средах.