Nuxt3中如何为ofetch设置全局请求头？求最优实现方案

问题描述 #

在Nuxt3中，官方推荐用ofetch替代axios，但ofetch没有类似axios的全局请求头配置选项。目前通过创建composable（useFoo.ts）的方式能给请求加头，但每个组件都得手动调用自定义方法，没法全局生效。想知道能不能通过全局监听ofetch请求、中间件或其他最佳实践实现全局配置？

当前临时方案代码示例 #

1. nuxt.config.ts 配置

export default defineNuxtConfig({
  runtimeConfig: {
    public: {
      apiKey: process.env.API_KEY,
    }
  },
})

2. composable 文件 useFoo.ts

const opts = {
  async onRequest({ request, options }: any) {
    const runtimeConfig = useRuntimeConfig()
    options.headers = { 'apiToken': runtimeConfig.apiKey };
  },
};

export const useFoo = () => $fetch.create(opts);

3. 组件中调用

const foo = useFoo();

foo("apiroute", {
    retry: 0,
  })
  .then((response: any) => {
    console.log(response.data);
  })
  .catch((error: any) => {
    console.log(error);
  });

全局配置方案 #

方法1：通过Nuxt插件全局重写$fetch #

创建Nuxt插件直接修改全局$fetch实例，这样所有组件、页面里用的$fetch都会自动带上请求头，不用再手动调用自定义方法。

步骤：

1. 在plugins目录下创建ofetch.global.ts文件：

export default defineNuxtPlugin(() => {
  const runtimeConfig = useRuntimeConfig()

  // 重写全局$fetch，添加请求头拦截
  globalThis.$fetch = $fetch.create({
    async onRequest({ options }) {
      // 合并原有请求头，避免覆盖用户手动设置的其他头
      options.headers = {
        ...options.headers,
        'apiToken': runtimeConfig.public.apiKey
      }
    }
  })

  // 也可以同时暴露自定义实例，方便特殊场景使用
  return {
    provide: {
      apiFetch: globalThis.$fetch
    }
  }
})

2. 组件/页面直接用全局$fetch即可：

$fetch("apiroute", { retry: 0 })
  .then(res => console.log(res))
  .catch(err => console.log(err))

方法2：给ofetch注册全局拦截钩子（结合Nuxt插件） #

如果需要更灵活的全局处理（比如请求前、响应后逻辑），可以通过插件给ofetch注册全局钩子：

export default defineNuxtPlugin(() => {
  const runtimeConfig = useRuntimeConfig()

  // 给所有ofetch请求添加全局请求前钩子
  const originalOnRequest = ofetch.defaults.onRequest
  ofetch.defaults.onRequest = async (context) => {
    // 先执行原有的钩子（如果存在）
    if (originalOnRequest) await originalOnRequest(context)
    // 合并添加自定义请求头
    context.options.headers = {
      ...context.options.headers,
      'apiToken': runtimeConfig.public.apiKey
    }
  }
})

注意事项 #

• 不要直接覆盖options.headers，用扩展运算符合并，避免丢失用户手动设置的其他请求头。
• 若要区分客户端/服务端请求，可在插件里用process.client或process.server判断，针对性添加头。
• 要是用runtimeConfig里的私有变量（非public），注意只在服务端使用，别把敏感信息暴露到客户端。

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