v3.16
Nuxt on GitHub

$fetch

源码
Nuxt 使用 ofetch 全局暴露 $fetch 助手用于发起 HTTP 请求。

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

在服务端渲染 (SSR) 期间，调用 $fetch 请求内部 API 路由 会直接执行对应的函数（模拟请求），从而节省一次额外的 API 请求。
在组件中直接使用 $fetch 而未使用 useAsyncData 包裹，会导致数据被获取两次：一次在服务端，一次在客户端 hydration 过程中。因为 $fetch 不会将服务端获取的数据状态传递到客户端，因此客户端必须再次请求数据。

用法

推荐使用 useFetch 或 useAsyncData 搭配 $fetch，以避免数据被重复获取。

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>
阅读更多 Docs > Getting Started > Data Fetching.

你也可以在仅在客户端运行的方法中使用 $fetch：

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>
相较于适用于 Nuxt 2 的 @nuxt/http 和 @nuxtjs/axios，$fetch 是 Nuxt 中推荐的 HTTP 请求方式。
如果你在开发环境中使用 $fetch 调用一个带有自签名证书的 HTTPS 地址，请在环境变量中设置 NODE_TLS_REJECT_UNAUTHORIZED=0。

传递 Headers 和 Cookies

在浏览器中调用 $fetch 时，用户的 headers（如 cookie）会自动发送到 API。

但在服务端渲染时，为了防止 SSRF（服务端请求伪造） 或 认证滥用 等安全风险，$fetch 默认不会携带浏览器的 cookie，也不会转发响应中的 cookie。

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

如果你需要在服务端转发 headers 和 cookies，必须手动传递它们：

pages/index.vue
<script setup lang="ts">
// 将用户的 headers 和 cookies 转发到 `/api/cookies`
const requestFetch = useRequestFetch()
const { data } = await useAsyncData(() => requestFetch('/api/cookies'))
</script>

不过，当你在服务端使用 useFetch 并传递相对路径时，Nuxt 会自动使用 useRequestFetch 来代理 headers 和 cookies（除了像 host 这样的禁止转发的 header）。