Vite Server Proxy Cookie: Полное Руководство по Настройке и Решению Проблем

Что такое Vite Proxy и зачем ему куки?

Vite — современный инструмент для фронтенд-разработки, ускоряющий сборку проектов. Его прокси-сервер перенаправляет запросы во время разработки, чтобы обойти CORS-ограничения. Куки играют ключевую роль в аутентификации и сессиях, но при работе с прокси часто возникают проблемы с их передачей между клиентом и бэкендом.

Настройка прокси для кук в vite.config.js

Для корректной работы с куками добавьте в vite.config.js:

1. Укажите changeOrigin: true для подмены заголовка Host
2. Активируйте cookieDomainRewrite для преобразования домена
3. Разрешите передачу учетных данных с withCredentials: true

// Пример конфигурации
export default {
  server: {
    proxy: {
      '/api': {
        target: 'https://backend.example.com',
        changeOrigin: true,
        cookieDomainRewrite: 'localhost',
        secure: false,
        configure: (proxy) => {
          proxy.on('proxyReq', (proxyReq) => {
            proxyReq.setHeader('Cookie', 'session=12345');
          });
        }
      }
    }
  }
}

Типичные проблемы с куками и их решения

• Куки не сохраняются: Проверьте cookieDomainRewrite и политику SameSite
• Ошибки CORS: Добавьте заголовок Access-Control-Allow-Credentials: true на сервере
• Сессии теряются: Убедитесь, что withCredentials включен в fetch/XHR запросах
• HTTPS проблемы: Используйте secure: false для self-signed сертификатов

Практический пример: аутентификация через прокси

Шаги для настройки JWT-авторизации:

1. Настройте прокси для маршрута /auth в Vite
2. Добавьте middleware для инъекции кук в запросы
3. В клиентском коде используйте:
   fetch('/api/user', { credentials: 'include' })
4. На сервере установите заголовки:
   Access-Control-Allow-Origin: http://localhost:5173
Access-Control-Allow-Credentials: true

Оптимизация безопасности

• Никогда не используйте secure: false в продакшене
• Ограничивайте cookieDomainRewrite доменом разработки
• Регулярно обновляйте Vite для фиксов уязвимостей
• Используйте httpOnly флаг для чувствительных кук

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

Почему куки не отправляются через Vite proxy?

Основные причины: отсутствие credentials: 'include' в запросе, неправильные CORS-заголовки на сервере или отсутствие cookieDomainRewrite в конфиге.

Как отладить проблемы с куками?

Используйте вкладку Network в DevTools: проверяйте заголовки Set-Cookie в ответах и Cookie в запросах. Анализируйте предупреждения консоли браузера.

Можно ли использовать прокси для production-сборки?

Нет, Vite proxy работает только в dev-режиме. Для продакшена настройте Nginx или облачный прокси.

Как передавать куки между поддоменами?

Настройте cookieDomainRewrite: '.example.com' и укажите домен в куках как .example.com на сервере.

Чем заменить proxy в продакшене?

Используйте: Cloudflare Workers, Nginx reverse proxy, или настройку CORS на бэкенд-сервере.