Nginx反向代理Vite Monorepo遇重定向过多问题求助

我正在搭建一个基于Monorepo的项目，通过Nginx反向代理部署多个Vite应用，目标是在开发环境中支持热模块替换（HMR）。目前根路径/的应用反向代理后运行正常，但部署在/app/路径的应用始终在浏览器中出现“Too Many Redirects”错误。为简化调试，我单独配置了一个Vite应用通过Nginx访问http://localhost/app/，但重定向循环问题依然存在。

Vite配置（worko-ui-react/vite.config.ts） #

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import compression from "vite-plugin-compression";

import path from "path";
// https://vite.dev/config/

export default defineConfig({
  plugins: [react(), compression()],
  envDir: "./environments", // 手动指定环境文件所在目录
  envPrefix: "APP_", // 手动指定环境变量前缀
  resolve: {
    alias: {
      "@": path.resolve(__dirname, "src"), // 添加`src`别名
      "@Assets": path.resolve(__dirname, "src/assets/assets.ts"),
      "@Components": path.resolve(__dirname, "src/components"),
      "@Context": path.resolve(__dirname, "src/context"),
      "@Enums": path.resolve(__dirname, "src/types/enums"),
      "@Hooks": path.resolve(__dirname, "src/hooks"),
      "@Interfaces": path.resolve(__dirname, "src/types/interface"),
      "@Layouts": path.resolve(__dirname, "src/layouts"),
      "@Pages": path.resolve(__dirname, "src/pages"),
      "@Styles": path.resolve(__dirname, "src/styles"),
      "@Services": path.resolve(__dirname, "src/services"),
      "@Utils": path.resolve(__dirname, "src/utils"),
      "@Views": path.resolve(__dirname, "src/views"),
      "@Routes": path.resolve(__dirname, "src/routes.ts"),
      "lib-worko-ai": path.resolve(__dirname, "../../packages/lib-worko-ai/src"),
      "@LibWorko": path.resolve(__dirname, "../../packages/lib-worko-ai/src"),
    },
  },
  optimizeDeps: {
    exclude: ["lib-worko-ai"],
  },
  server: {
    fs: {
      allow: [".."],
    },
    proxy: {
      "/cognito": {
        target: "https://cognito-idp.ap-south-1.amazonaws.com",
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/cognito/, ""),
      },
    },
    host: "0.0.0.0", // 监听所有网络接口（用于代理）
    port: 3001, // 指定运行端口
    strictPort: true, // 端口被占用时不自动切换
    open: true, // 启动服务器时自动打开浏览器
  },
  base: "/app/",
});

路由配置（Routes.tsx） #

const AppRoutes = createBrowserRouter([
  {
    path: "/",
    // errorElement: <ErrorFallback />,
    element: <MainLayout />,
    children: [
      {
        path: "auth/*",
        element: (
          <Suspense fallback={<MainLoader />}>
            <AuthRouter />
          </Suspense>
        ),
      },
      //   {path: 'dashboard/*', element: <DashboardRedirect />},
      { path: "*", element: <PageNotFound /> },
    ],
  },
], {
  basename: "/app",
});

export default AppRoutes;

Nginx配置 #

#user  nobody;
worker_processes  1;

#error_log  logs/error.log;
#error_log  logs/error.log  notice;
#error_log  logs/error.log  info;

#pid        logs/nginx.pid;


events {
    worker_connections  1024;
}


http {
    include       mime.types;
    default_type  application/octet-stream;

    #log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
    #                  '$status $body_bytes_sent "$http_referer" '
    #                  '"$http_user_agent" "$http_x_forwarded_for"';

    #access_log  logs/access.log  main;

    sendfile        on;
    #tcp_nopush     on;

    #keepalive_timeout  0;
    keepalive_timeout  65;

    #gzip  on;

    server {
        listen       80;
        server_name  localhost;

        location /app/ {
            proxy_pass http://127.0.0.1:3001/;

            proxy_set_header Host $host;
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
            proxy_set_header X-Forwarded-Proto $scheme;

            proxy_http_version 1.1;
            proxy_set_header Upgrade $http_upgrade;
            proxy_set_header Connection "Upgrade";
        }
    }
        
}

解决方案 #

重定向循环的核心原因是Nginx的proxy_pass配置与Vite的base设置不匹配：

• Vite应用的base设为/app/，意味着它期望所有资源和路由都以/app/为根路径
• 当前Nginx的proxy_pass http://127.0.0.1:3001/末尾带斜杠，会把/app/路径直接转发到Vite服务器的根路径/，而Vite会将根路径重定向到/app/，形成循环

修复步骤： #

1. 调整Nginx的proxy_pass配置：
   将location /app/中的proxy_pass末尾的斜杠去掉，改为：

   proxy_pass http://127.0.0.1:3001;
   

   这样Nginx会将/app/xxx转发到http://127.0.0.1:3001/app/xxx，与Vite的base路径完全匹配，避免重定向。

2. 确保Vite开发服务器的HMR配置正确：
   在Vite配置的server字段中添加origin设置，确保HMR连接指向正确的代理地址：

   server: {
     // ... 其他配置
     origin: 'http://localhost/app'
   }
   

   这能保证热模块替换的WebSocket连接不会出现路径错误。

3. 验证路由配置：
   当前路由的basename: "/app"配置是正确的，无需修改，它会让React Router自动处理/app前缀的路由。

完成以上修改后，重启Nginx和Vite开发服务器，访问http://localhost/app/即可解决重定向循环问题，同时正常支持HMR。

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