Vite代理未重定向至其他端口问题求助

嘿，我帮你梳理下这个代理失效的问题，主要是两个关键地方出了错，咱们一步步来修正：

首先得明确：Vite不支持在package.json里配置proxy字段，那个是Create React App的专属配置，你写的"proxy": "http://localhost:5000"完全不会起作用，直接删掉就行。

然后核心问题在你的vite.config.js里——rewrite规则写错了！你现在写的是替换/app开头的路径，但你的请求是/api，这完全不匹配，代理自然不会生效。

修正后的vite.config.js配置 #

我给你调整好正确的配置，你可以直接用：

export default defineConfig({
  plugins: [react()],
  server: {
    port: 3000,
    proxy: {
      '/api': {
        target: 'http://localhost:5000/',
        changeOrigin: true,
        secure: false,
        ws: true,
        // 这里要根据你的后端接口情况调整：
        // 如果后端接口是http://localhost:5000/api，就删掉这行rewrite
        // 如果后端接口是http://localhost:5000（没有/api前缀），就保留这行，把/api前缀去掉
        rewrite: (path) => path.replace(/^\/api/, '')
      }
    }
  }
})

关于rewrite的小说明： #

举个例子：

• 如果后端的接口地址是http://localhost:5000/api（和前端请求的路径前缀一致），那你不需要rewrite，直接删掉这一项就行，Vite会自动把http://localhost:3000/api转发到http://localhost:5000/api。
• 如果后端的接口地址是http://localhost:5000（比如直接请求http://localhost:5000就能拿到数据），那rewrite会把前端请求里的/api前缀去掉，让请求变成http://localhost:5000。

最后一步：重启Vite！ #

修改完配置后，一定要关掉当前的Vite开发服务器，重新运行npm run dev，配置才会生效。

之后再测试你的请求：

const res = await fetch("/api");
console.log(res);

如果代理成功，控制台里的url应该显示http://localhost:5000/api（或者你rewrite后的地址），而不是停留在3000端口啦。

额外要检查的点： #

• 确认你的后端服务确实在5000端口跑着，而且直接访问http://localhost:5000/api能正常返回数据。
• secure: false主要是给HTTPS的后端服务用的（忽略证书验证），如果你的后端是HTTP服务，这个配置留着也没关系，不影响。

内容的提问来源于stack exchange，提问作者chocolate