Как настроить прокси в Vite?

Question

Я пытался следить за документами и создал vite.config.js как это:

const config = {
  outDir: '../wwwroot/',
  proxy: {
    // string shorthand
    '/foo': 'http://localhost:4567',
    // with options
    '/api': {
      target: 'http://jsonplaceholder.typicode.com',
      changeOrigin: true,
      rewrite: path => path.replace(/^\/api/, '')
    }
  }
};

export default config;

И попытался проверить это следующими вызовами:

fetch('/foo');
fetch('/api/test/get');

Я ожидал реальных запросов, так как http://localhost:4567/foo и http://jsonplaceholder.typicode.com/test/getНо у них обоих в качестве источника был мой сервер разработки: http://localhost:3000/foo и http://localhost:3000/api/test/get

Я неправильно это понял? Как должны работать прокси?

Я также создал проблему в репозитории Vite, но он был закрыт, и я не понял заключительного комментария.

Answer 1

Оказывается, нужно указать secure flag на false вот так:

 proxy: {
      '/api': {
           target: 'https://localhost:44305',
           changeOrigin: true,
           secure: false,      
           ws: true,
       }
  }

Связанная проблема с github

Answer 2

На основе Vite Config вам нужно указать его черезserver -> proxyвнутриvite.config.js:

      export default defineConfig({
  server: {
    proxy: {
      "/api": {
        target: "https://your-remote-domain.com",
        changeOrigin: true,
        secure: false,
      },
    },
  },
  // some other configuration
})

Answer 3

Для отладки я настоятельно рекомендую добавить прослушиватели событий в прокси , чтобы вы могли видеть, как трансформируются запросы, попадают ли они на целевой сервер и что возвращается.

      proxy: {
        '/api': {
          target: 'https://localhost:44305',
          changeOrigin: true,
          secure: false,      
          ws: true,
          configure: (proxy, _options) => {
            proxy.on('error', (err, _req, _res) => {
              console.log('proxy error', err);
            });
            proxy.on('proxyReq', (proxyReq, req, _res) => {
              console.log('Sending Request to the Target:', req.method, req.url);
            });
            proxy.on('proxyRes', (proxyRes, req, _res) => {
              console.log('Received Response from the Target:', proxyRes.statusCode, req.url);
            });
          },
        }
      }

proxyбудет экземпляром «http-proxy». Для получения дополнительной информации см. https://github.com/http-party/node-http-proxy#options .

Answer 4

предположим, что https://localhost:44305 — это серверная часть, а порт 3000 — внешний интерфейс.

Я думаю, документ Vite немного сбивает с толку.

Когда я установил'/api' : {target: 'https://localhost:44305'}, он фактически перенаправляет на http://localhost:44305/api для http://localhost:3000/api вместо перенаправления на https://localhost:44305/.

поэтому, если вы используете axios.get(), для внутреннего сервера должно быть установлено значение «axios.get('/api/something')», http://localhost:44305/api/something

Надеюсь, этот трюк окажется полезным.

Answer 5

      import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
export default defineConfig({
  server: {
    proxy: {
      '/api':'http://localhost:5000',
    },
  },
  plugins: [react()],
});

// это единственный метод, который сработал для меня, вам не нужны все параметры, такие как цель, безопасность и все остальное, достаточно только приведенного выше кода в вашем файле vite.config.js, и убедитесь, что вы указали порт локального хоста номер вашего сервера в /api.