我正在尝试使用Nginx为我的前端和后端创建反向代理设置。我的后端在反向代理后面工作正常，其Swagger UI可以通过我的Web浏览器从公共URL访问。我的前端不是。我的前端是使用Typescript和Nuxt 3（Vue）创建的。我想完成的反向代理Map如下所示：
后台： foo.com/leaf/api/x --〉127.0.0.1:8000/x前端：foo.com/leaf/y--〉127.0.0.1:3000/y
为了实现这一点，我已经按照这里显示的顺序将以下块添加到我的nginx.conf中：

location /leaf/api/ {
  proxy_pass http://localhost:8000/;
  proxy_set_header Host $http_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 /leaf/ {
  proxy_pass http://localhost:3000/;
  proxy_set_header Host $http_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 / {
  root   html;
  index  index.html index.htm;
}

这种配置适用于后端，但不适用于基于Nuxt的前端。当我运行Nuxt开发服务器硝基来测试设置并在浏览器中转到localhost/leaf时，它似乎可以很好地获取Nuxt的入口脚本，但所有后续请求都失败，并显示404或500：

我在硝基终端进程中没有看到任何错误消息，在访问日志中也没有看到任何有用的信息。
我的nuxt.config.ts包含以下内容：

// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  sourcemap: {
    server: true,
    client: true
  },
  ssr: false,

  css: [
    'primevue/resources/themes/saga-blue/theme.css',
    'primevue/resources/primevue.css',
    'primeicons/primeicons.css',
    'primeflex/primeflex.css',
    '/assets/styles/layout.scss'
  ],
  build: {
    transpile: ['primevue', 'primeflex']
  },
  modules: [
    '@pinia/nuxt',
    '@pinia-plugin-persistedstate/nuxt',
  ],
  vite: {
    build: {
      sourcemap: 'inline'
    },
  },
})

构建项目并使用node运行它也会遇到同样的问题。
我做错了什么？如果我的应用是用Nuxt编写的，我应该怎么做才能在反向代理环境中部署我的应用？
感谢您的参与，
约书亚