Nuxt3项目服务端用fetch加载本地文件报错如何解决？

问题场景 #

在Nuxt3组件中通过$fetch能正常获取静态JSON数据：

export default {
  methods: {
    async getPodcasts() {
      return await $fetch('_nuxt/assets/data/podcasts.json')
    }
  }
}

但在服务端API文件(server/api/podcasts/index.get.js)中使用原生fetch读取同一份文件时，出现500错误：

[nuxt] [request error] [unhandled] [500] Failed to parse URL from _nuxt/assets/data/podcasts.json

原因分析 #

组件中的$fetch是Nuxt封装的方法，会根据运行环境自动适配路径：客户端发起HTTP请求，服务端则内部处理为正确的资源读取逻辑。而服务端API代码运行在Node.js环境，原生fetch要求传入合法的绝对URL，直接使用相对路径会被判定为无效URL，导致解析失败。

解决方案 #

方案1：直接读取本地文件（推荐） #

利用Node.js的文件系统模块，直接读取项目中的JSON文件：

import fs from 'fs/promises'
import path from 'path'

export default defineEventHandler(async () => {
  // 构建文件的绝对路径
  const filePath = path.join(process.cwd(), 'assets/data/podcasts.json')
  // 读取并解析JSON内容
  const rawData = await fs.readFile(filePath, 'utf-8')
  return JSON.parse(rawData)
})

方案2：使用绝对URL发起fetch请求 #

通过请求头获取当前服务域名，拼接成绝对URL后发起请求：

export default defineEventHandler(async (event) => {
  const baseUrl = `http://${event.node.req.headers.host}`
  const res = await fetch(`${baseUrl}/_nuxt/assets/data/podcasts.json`)
  return res.json()
})

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