Comment utiliser une URL de base différente

Question

Pendant le développement, j'ai utilisé Vite pour le client React pour HMR sur http://localhost:5173/ et j'ai utilisé le backend Node pour gérer les appels et les ressources API.

Pour les versions de production, Node fournira les services frontend, je souhaite donc utiliser /whatever/endpoint。因此，当由Vite提供服务时，我需要一种重写的方式，将/映射到http://my.api.host:3000/.

Je suis sûr que cela doit être une opération courante, mais je ne sais pas comment faire. D'après la documentation, je pense que cela devrait être fait :

vite.config.js

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react-swc'

export default defineConfig({
    plugins: [react()],
    server: {
        origin: 'http://my.api.host:3000'
    },
    base: 'http://my.api.host:3000'
})

Mais ça :

backgroundImage: 'url(/img/backgrounds/main.jpg)'

J'essaie toujours de fournir un service depuis http://localhost:5173.

Answer 1

Pour réécrire les points de terminaison de l'API et servir les ressources à partir du bon emplacement lors de l'utilisation de Vite pour la production, vous pouvez utiliser l'option proxy dans votre configuration Vite. Voici un exemple de la façon de le configurer :

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react-swc';

export default defineConfig({
  plugins: [react()],
  server: {
    proxy: {
      '/whatever/endpoint': {
        target: 'http://my.api.host:3000',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/whatever\/endpoint/, ''),
      },
    },
  },
  base: 'http://my.api.host:3000/',
});

La fonction 'rewrite' est utilisée pour supprimer le préfixe /whatever/endpoint du chemin de la requête avant de le transmettre à la cible.