Cara menggunakan URL asas yang berbeza

Question

Semasa pembangunan, saya menggunakan Vite untuk klien React untuk HMR pada http://localhost:5173/ dan menggunakan bahagian belakang Node untuk mengendalikan panggilan dan sumber API.

Untuk binaan pengeluaran, Node akan menyediakan perkhidmatan bahagian hadapan, jadi saya ingin menggunakan /whatever/endpoint。因此，当由Vite提供服务时，我需要一种重写的方式，将/映射到http://my.api.host:3000/.

Saya pasti ini mesti operasi biasa, tetapi saya tidak tahu bagaimana untuk melakukannya. Menurut dokumentasi, saya rasa ini perlu dilakukan:

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'
})

Tetapi ini:

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

Masih cuba memberikan perkhidmatan dari http://localhost:5173.

Answer 1

Untuk menulis semula titik akhir API dan menyampaikan sumber dari lokasi yang betul apabila menggunakan Vite untuk pengeluaran, anda boleh menggunakan pilihan proksi dalam konfigurasi Vite anda. Berikut ialah contoh cara mengkonfigurasinya:

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/',
});

Fungsi 'tulis semula' digunakan untuk mengalih keluar awalan /whatever/endpoint daripada laluan permintaan sebelum memajukannya ke sasaran.