$fetch

Nuxt 使用 ofetch 全局暴露了 $fetch 辅助函数，用于发起 HTTP 请求。

Nuxt 使用 ofetch 全局暴露了 $fetch 辅助函数，用于在 Vue 应用或 API 路由中发起 HTTP 请求。

在服务端渲染期间，调用 $fetch 来获取你内部的 API 路由会直接调用相关函数（模拟请求），省去额外的一次 API 调用。 :

在组件中使用 $fetch 而不用 useAsyncData 包裹，会导致数据被获取两次：先在服务端获取一次，然后在客户端 hydration 期间再获取一次，因为 $fetch 不会将状态从服务端转移到客户端。因此 fetch 会在两端都执行，因为客户端必须重新获取数据。 :

用法

我们推荐使用 useFetch 或 useAsyncData + $fetch 来防止在获取组件数据时重复获取数据。

app/app.vue

<script setup lang="ts">
// 在 SSR 期间数据被获取两次，一次在服务端，一次在客户端。
const dataTwice = await $fetch('/api/item')

// 在 SSR 期间数据只在服务端获取一次，并被转移到客户端。
const { data } = await useAsyncData('item', () => $fetch('/api/item'))

// 你也可以将 useFetch 作为 useAsyncData + $fetch 的简写
const { data } = await useFetch('/api/item')
</script>

你可以在任何只在客户端执行的方法中使用 $fetch。

app/pages/contact.vue

<script setup lang="ts">
async function contactForm () {
  await $fetch('/api/contact', {
    method: 'POST',
    body: { hello: 'world' },
  })
}
</script>

<template>
  <button @click="contactForm">
    联系我们
  </button>
</template>

$fetch 是在 Nuxt 中发起 HTTP 调用的首选方式，而不是为 Nuxt 2 设计的 @nuxt/http 和 @nuxtjs/axios。 :

如果你在开发中使用 $fetch 调用带有自签名证书的（外部）HTTPS URL，你将需要在环境中设置 NODE_TLS_REJECT_UNAUTHORIZED=0。 :

当我们在浏览器中调用 $fetch 时，诸如 cookie 之类的用户请求头会直接发送给 API。

然而，在服务端渲染期间，出于服务端请求伪造（SSRF）或鉴权滥用等安全风险， $fetch 不会包含用户的浏览器 cookie，也不会传递 fetch 响应中的 cookie。

app/pages/index.vue

<script setup lang="ts">
// 在 SSR 期间这不会转发请求头或 cookie
const { data } = await useAsyncData(() => $fetch('/api/cookies'))
</script>

server/api/cookies.ts

export default defineEventHandler((event) => {
  const foo = getCookie(event, 'foo')
  // ... 对 cookie 做一些处理
})

如果你需要在服务端转发请求头和 cookie，必须手动传递它们：

app/pages/index.vue

<script setup lang="ts">
// 这会将用户的请求头和 cookie 转发给 `/api/cookies`
const requestFetch = useRequestFetch()
const { data } = await useAsyncData(() => requestFetch('/api/cookies'))
</script>

不过，当在服务端用相对 URL 调用 useFetch 时，Nuxt 会使用 useRequestFetch 来代理请求头和 cookie（不打算转发的请求头，如 host 除外）。