为什么我的Vite配置未使用指定代理，反而以自身URL作为代理？

• 核心问题：配置语法错误
  你的Vite代理配置存在语法错误："/api"的对象括号提前闭合了，导致https、changeOrigin、rewrite这些关键代理配置没有归属到/api的规则下，Vite无法识别正确的代理逻辑，自然不会把请求转发到指定的目标地址。

• 修正后的正确配置
  调整括号位置，让所有代理相关属性都包含在"/api"的配置对象内，同时修正rewrite规则的匹配前缀（原规则匹配/app和代理前缀/api不符）：

  import { defineConfig } from 'vite';
  import react from '@vitejs/plugin-react-swc';
  
  export default defineConfig({
    plugins: [react()],
    resolve: {
      alias: [
        { find: '@', replacement: '/src' }
      ],
    },
    server: {
      port: 3000,
      proxy: {
        "/api": { 
          target: "https://truthgate-backend.vercel.app",
          https: true,
          changeOrigin: true,
          rewrite: (path) => path.replace(/^\/api/, '')
        }
      }
    },
  })
  

• 关键配置说明

  • changeOrigin: true：让目标服务器收到的请求头Host与目标地址一致，避免跨域拦截；
  • https: true：适配目标地址的HTTPS协议，确保代理请求能正常建立SSL连接；
  • rewrite规则：移除请求路径中的/api前缀，保证后端收到的路径符合预期。

修正配置后重启Vite服务，/api开头的请求就会正确转发到指定的后端地址了。

内容的提问来源于stack exchange，提问作者Pritom Paul Dip