Как настроить прокси-сервер в Next.js?

@cayla 

Настройка прокси-сервера в проекте Next.js может быть полезной, когда вам нужно избежать проблем с CORS или направить API-запросы на сервер, находящийся по другому адресу, во время разработки. Один из способов сделать это — использовать файл next.config.js с rewrites или использовать http-proxy-middleware.

Метод 1: Использование rewrites в next.config.js

Next.js предоставляет встроенную поддержку для переписывания URL-путей через rewrites, что может помочь в организации прокси-запросов.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

// next.config.js

module.exports = {
  async rewrites() {
    return [
      {
        source: '/api/:path*', // на какой путь реагировать
        destination: 'https://external-api.example.com/:path*', // куда перенаправлять запрос
      },
    ]
  },
}

Что это делает:

• Все запросы, начинающиеся с /api/, будут проксированы на https://external-api.example.com/.
• Параметр :path* означает, что все подмаршруты будут также передаваться на внешнюю API.

Метод 2: Использование http-proxy-middleware

Этот метод может быть более гибким, особенно если у вас сложные правила маршрутизации или вы хотите манипулировать запросами/ответами.

1. Установите http-proxy-middleware:

1

npm install http-proxy-middleware --save

1. Создайте файл в папке pages/api, например, proxy.js:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17

// pages/api/proxy.js

import { createProxyMiddleware } from 'http-proxy-middleware';

export const config = {
  api: {
    bodyParser: false, // отключает встроенный парсер body
  },
};

export default createProxyMiddleware({
  target: 'https://external-api.example.com',
  changeOrigin: true,
  pathRewrite: {
    '^/api/proxy': '', // переписывает путь
  },
});

Что это делает:

• Запросы на /api/proxy будут проксированы на https://external-api.example.com.
• changeOrigin: true изменяет заголовок Origin запроса на целевой адрес.

Примечания

• Убедитесь, что вы используете прокси-только в режиме разработки, если ваш бэкенд имеет другой URL для продакшена.
• rewrites могут быть более простым способом настройки, если вам не нужны дополнительные возможности прокси-соединения.

Эти методы помогут настроить прокси в вашем приложении Next.js и избежать проблем с CORS в процессе разработки.