Nuxt3调用后端/api/data接口返回404页面未找到的原因排查

问题根源 #

当你在Nuxt3组件中用$fetch('http://localhost/api/data')发起请求时，服务器端渲染（SSR）阶段的请求是从服务器内部发起的，此时localhost指向的是Nuxt3服务本身监听的端口，而非Nginx的监听端口。也就是说，这个请求没有经过Nginx的转发规则，直接被Nuxt3处理了——而Nuxt3并没有/api/data这个页面路由，所以返回404错误。

而浏览器直接访问http://localhost/api/data时，请求是从客户端发起，会经过Nginx的转发逻辑，被路由到后端服务，因此能正常返回数据。

解决方法 #

方法1：使用相对路径请求 #

把请求地址改成相对路径，Nuxt3的$fetch会自动适配客户端和服务器端的请求场景：

export default defineComponent({
  name: "mycomponent",
  async setup() {
    console.log(await $fetch('/api/data'));
  }
})

• 客户端环境：请求会基于当前页面域名发送，自动经过Nginx转发到后端。
• 服务器端渲染环境：Nuxt3会根据配置自动处理请求代理（或结合下面的代理配置）。

方法2：配置Nuxt3的内部代理 #

如果需要在服务器端渲染时直接将请求转发到后端（不经过Nginx），可以在nuxt.config.ts中配置Nitro代理：

export default defineNuxtConfig({
  nitro: {
    // 开发环境代理
    devProxy: {
      '/api': {
        target: 'http://localhost:你的后端服务端口',
        changeOrigin: true
      }
    },
    // 生产环境代理
    proxy: {
      '/api': {
        target: 'http://localhost:你的后端服务端口',
        changeOrigin: true
      }
    }
  }
})

配置后，无论是客户端还是服务器端的/api开头请求，都会直接转发到后端服务，避免绕路Nginx导致的问题。

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