Nginx代理子目录后资源404、链接跳转异常问题求助

嘿，这个问题我熟！你遇到的资源404和点击链接后跳转到根路径/login的问题，本质是反向代理的路径传递逻辑和Nuxt应用的基础路径配置没对齐，咱们一步步来修复：

问题根源拆解 #

1. 资源404：服务器1把/folder/xxx转发到服务器2的/xxx，但服务器2的Nginx和Nuxt应用都没意识到这些请求是来自/folder前缀的，所以当浏览器请求/folder/_nuxt/xxx.js时，服务器2找不到对应资源。
2. 路由跳转错误：Nuxt默认生成的路由链接是绝对路径（比如/login），没有带上/folder前缀，所以点击后浏览器直接跳转到域名根路径。

步骤1：修正服务器1的Nginx配置 #

调整反向代理的路径传递逻辑，确保/folder前缀被正确转发到服务器2：

location /folder {
    proxy_pass http://200.1.1.1/folder;
    # 必须设置这些代理头，让Nuxt能获取正确的请求上下文
    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;
}

这里去掉了原配置中location和proxy_pass的尾斜杠，避免路径被意外截断，同时明确把/folder前缀传递给服务器2。

步骤2：更新服务器2的Nginx配置 #

让服务器2能识别并处理/folder前缀的请求，修改后的完整配置如下：

server {
    listen 80;
    listen 443;
    set $root_path /root/app;
    root $root_path/client/nuxt-dist/dist;

    # 优先处理带/folder前缀的请求
    location /folder {
        # 去掉/folder前缀，让后续逻辑能匹配到实际资源路径
        rewrite ^/folder(.*)$ $1 break;
        try_files $uri $uri/ @nodeproxy;
    }

    location @nodeproxy {
        proxy_pass http://localhost:3000;
        # 传递前缀信息给Nuxt，帮助它生成正确的链接
        proxy_set_header X-Forwarded-Prefix /folder;
        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;
    }

    # 处理API请求（如果你的应用有API）
    location /folder/api {
        rewrite ^/folder/api(.*)$ /api$1 break;
        proxy_pass http://localhost:3001;
        client_max_body_size 3m;
        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;
    }

    # 处理静态资源，确保/folder前缀下的资源能被正确找到
    location ~* ^/folder/.*\.(js|jpg|jpeg|txt|png|css|pdf|ico|map)$ {
        rewrite ^/folder(.*)$ $1 break;
        gzip_static on;
        expires 30d;
        root $root_path/client/nuxt-dist/dist;
    }

    # 保留你原有的其他配置（比如路径末尾斜杠重定向）
    # rewrite ^/(.*)/$ /$1 permanent;
}

核心逻辑是通过rewrite去掉/folder前缀，让服务器2的Nginx能正常匹配静态资源和代理到Nuxt服务，同时通过X-Forwarded-Prefix头告诉Nuxt它运行在/folder路径下。

步骤3：配置Nuxt应用的基础路径（最关键！） #

这一步绝对不能忘！修改Nuxt的配置文件，让它生成的所有资源链接和路由都自动带上/folder前缀：

如果你用的是Nuxt 2： #

在nuxt.config.js中添加：

export default {
  router: {
    base: '/folder/'
  },
  // 你的其他配置...
}

如果你用的是Nuxt 3： #

在nuxt.config.ts（或.js）中添加：

export default defineNuxtConfig({
  app: {
    baseURL: '/folder/'
  },
  // 你的其他配置...
})

修改完成后，重新构建Nuxt应用，把新生成的dist目录部署到服务器2的对应路径。

最后验证 #

完成以上三步后：

• 重启两台服务器的Nginx服务：sudo nginx -s reload
• 访问http://domain.tld/folder，检查资源是否加载正常
• 点击登录链接，应该跳转到http://domain.tld/folder/login而不是根路径

这样就能完美解决你遇到的问题啦！

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