Nuxt 3中调用Server API返回404是怎么回事？

UI瑞雪提问于 2026-03-26 13:05:19 阅读 10

框架

我在Nuxt 3项目里按照文档在server/api目录下建了个test.get.ts，但前端调用$fetch(‘/api/test’)一直报404，路径应该没错啊？

本地开发环境，Nuxt版本是3.10.0，文件位置是server/api/test.get.ts，内容如下：

export default defineEventHandler(() => {
  return { message: 'Hello from server API!' }
})

页面里就简单调了一下：const data = await $fetch('/api/test')，结果控制台直接404，这到底哪儿出问题了？

Nuxt Vue框架

我来解答赞 5 收藏

反馈

1 条解答

闲人建刚 Lv1

这个问题的关键是Nuxt 3中API路径和请求路径的处理方式。首先，你定义的API文件名 test.get.ts 虽然符合约定式路由规则，但前端请求的路径需要考虑Nuxt默认的API前缀配置。

在Nuxt 3中，默认情况下server/api目录下的API接口会自动添加一个/api前缀（这可以通过nuxt.config.js中的routeRules配置修改）。所以当你请求'/api/test'时，实际上应该请求的是'/api/api/test'。

不过，更推荐的做法是保持原样，然后调整前端请求路径。下面是解决方案：

1. 修改前端请求代码：

const data = await $fetch('/api/test')

这个写法本身没错，但要确认Nuxt配置。

2. 检查nuxt.config.ts配置：
如果想直接使用'/api/test'路径，可以在nuxt.config.ts里加一行：

export default defineNuxtConfig({

  nitro: {

    routeRules: {

      '/api/**': { cors: true }

    }

  }

})

3. 确保API文件命名正确：
虽然test.get.ts可以工作，但更常见的命名方式是test.ts，因为Nuxt 3会根据HTTP方法自动匹配handler。

4. 重启开发服务器：
有时候修改了配置后不重启服务，新的配置不会生效。记得改完配置就重启一下。

原理就是Nuxt通过约定的方式管理API路径，前端请求路径需要与后端实际暴露的路径匹配。这个机制能帮助我们更好地组织项目结构，但也容易让人困惑路径问题。

顺便说一句，我之前也在这上面栽过跟头，调试这种路径问题最烦人了，建议多用console.log调试具体请求路径是否正确。

2026-03-26 13:06