如何在Nuxt 3服务器路由中调用其他Server API路由获取数据?
在Nuxt 3中复用内部API逻辑生成站点地图的方案
完全可行,这里提供两种更优的实现方式,既能避免重复编写CMS请求代码,又能解决内部路由数据获取问题:
方法一:抽离可复用的获取数据函数(推荐)
最优雅高效的方式是把获取帖子的核心逻辑抽成独立工具函数,在API路由和站点地图中直接调用,无需通过HTTP请求:
- 创建工具函数文件
/server/utils/getPosts.js:
export default async function getPosts() { const { auth, posts } = useRuntimeConfig() // 保留原有的CMS请求逻辑 const { records: postList } = await $fetch(`${posts}?api_key=${auth}`) return postList }
- 修改API路由文件(比如
/server/api/posts/route.js),复用工具函数:
import getPosts from '~/server/utils/getPosts' export default defineEventHandler(async () => { const postList = await getPosts() return { records: postList } })
- 在站点地图文件
/server/routes/sitemap.xml.js中直接调用工具函数:
import getPosts from '~/server/utils/getPosts' export default defineEventHandler(async (event) => { // [...] 保留原有的站点地图初始化代码 const postList = await getPosts() postList.forEach((post) => { if (post.fields.Status) { sitemap.write({ url: `posts/${post.fields.Slug}/`, lastmod: post.lastMod }) } }) // [...] 保留原有的站点地图收尾代码 })
方法二:通过完整URL调用内部API
如果暂时不想抽离函数,可通过指定完整应用BaseURL来用$fetch请求内部API:
export default defineEventHandler(async (event) => { // [...] 站点地图初始化代码 const { public: { baseURL } } = useRuntimeConfig() // 用完整BaseURL调用内部API const { records: postList } = await $fetch(`${baseURL}/api/posts`) postList.forEach((post) => { if (post.fields.Status) { sitemap.write({ url: `posts/${post.fields.Slug}/`, lastmod: post.lastMod }) } }) // [...] 站点地图收尾代码 })
注意:这种方式会多一次HTTP请求,性能不如方法一,仅适合临时场景。
为什么直接用$fetch('/api/posts')不行?
在Nuxt 3服务器路由中,直接调用相对路径的$fetch会默认以当前请求的域名作为基础,但站点地图若在服务器启动时预生成或内部调用,可能无法正确解析相对路径,导致请求失败。
内容的提问来源于stack exchange,提问作者John Overstreet
相关产品推荐
相关产品推荐

