Nuxt Proxy Server: Полное Руководство по Настройке и Использованию

Nuxt.js — мощный фреймворк для создания Vue.js приложений, но при работе с внешними API часто возникает проблема CORS или смешивания протоколов. Прокси-сервер в Nuxt решает эти задачи, перенаправляя запросы через серверную часть. В этом руководстве разберем настройку прокси для Nuxt 2 и Nuxt 3, практические примеры и лучшие практики.

Зачем нужен прокси-сервер в Nuxt.js?

Проксирование в Nuxt решает ключевые проблемы разработки и продакшена:

• Обход CORS: Браузеры блокируют запросы к доменам, отличным от текущего. Прокси маскирует запросы как «свои».
• Безопасность: Скрывает чувствительные данные (API-ключи) от клиента.
• Упрощение путей: Замена сложных URL на лаконичные эндпоинты.
• Тестирование: Легкая интеграция с локальными и staging API.

Настройка прокси в Nuxt 2 с @nuxtjs/proxy

Для Nuxt 2 используйте официальный модуль:

1. Установите пакеты:

   npm install @nuxtjs/axios @nuxtjs/proxy

2. В nuxt.config.js добавьте:

   modules: [
     '@nuxtjs/axios',
   ],
   axios: {
     proxy: true
   },
   proxy: {
     '/api/': {
       target: 'https://ваш-api-сервер.com',
       pathRewrite: { '^/api/': '' },
       changeOrigin: true
     }
   }

3. Используйте в компонентах:

   async fetch() {
     const data = await this.$axios.get('/api/users');
   }

Проксирование в Nuxt 3: Nitro Server

Nuxt 3 использует сервер Nitro. Настройте прокси через nuxt.config.ts:

export default defineNuxtConfig({
  nitro: {
    routeRules: {
      '/proxy/**': {
        proxy: 'https://api.example.com/**'
      }
    }
  }
})

Или создайте серверный хендлер server/proxy.ts:

import { proxyRequest } from 'nitro/server';
export default defineEventHandler(async (event) => {
  return proxyRequest(event, 'https://api.target.com' + event.path);
});

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

• Ошибка 404: Проверьте путь в pathRewrite и целевой URL.
• CORS сохраняется: Убедитесь, что changeOrigin: true активирован.
• Медленные запросы: Оптимизируйте бэкенд или используйте кэширование.
• HTTPS-ошибки: Для самоподписанных сертификатов добавьте rejectUnauthorized: false (только для dev!).

Безопасность и оптимизация

При работе с прокси соблюдайте правила:

1. Ограничивайте доступ по IP в продакшене через Nginx.
2. Используйте переменные окружения для хранения секретов (например, .env).
3. Добавляйте таймауты запросов во избежание зависаний.
4. Для Nuxt 3 применяйте middleware для валидации запросов.

Альтернативы: когда прокси не нужен?

В некоторых случаях можно обойтись без прокси:

• Если API поддерживает CORS.
• Использование serverMiddleware для простых эмуляций.
• Серверные функции (serverless) в облачных провайдерах.

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

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

Запустите Nuxt с npm run dev и откройте вкладку «Network» в DevTools. Запросы к /api/ должны показывать статус 200 с перенаправлением.

Работает ли прокси в статическом режиме (nuxt generate)?

Нет. Для статических сайтов используйте клиентские запросы с настроенным CORS или переключитесь на SSR-режим.

Можно ли проксировать WebSocket?

Да. В Nuxt 2 добавьте в конфиг:

proxy: {
  '/ws/': { target: 'ws://backend', ws: true }
}

В Nuxt 3 используйте кастомный серверный обработчик.

Как ограничить прокси определенными доменами?

В nuxt.config добавьте проверку в proxy-объект:

proxy: {
  '/api/': {
    target: process.env.API_URL,
    onProxyReq(proxyReq) {
      if (!validDomains.includes(proxyReq.host)) {
        throw new Error('Доступ запрещен');
      }
    }
  }
}

Чем @nuxtjs/proxy отличается от http-proxy-middleware?

@nuxtjs/proxy — обертка над http-proxy-middleware, оптимизированная для Nuxt 2. Для кастомных сценариев подключите middleware напрямую.

Прокси-сервер в Nuxt — незаменимый инструмент для безопасного взаимодействия с API. Следуя этому руководству, вы сможете настроить его за 10 минут, избежав типичных ошибок. Для сложных проектов комбинируйте прокси с serverMiddleware и облачными функциями.