$fetch
Nuxt 使用 ofetch 全局暴露 $fetch 助手以进行 HTTP 请求。
Nuxt 使用 ofetch 全局暴露 $fetch 助手，以便在您的 Vue 应用或 API 路由中进行 HTTP 请求。
在服务器端渲染期间，调用 $fetch 来获取您的内部 API 路由 将直接调用相关函数（模拟请求），节省额外的 API 调用。
在组件中使用 $fetch 而不将其包装在 useAsyncData 中，会导致数据被获取两次：首先在服务器上，然后在客户端水合期间再次获取，因为 $fetch 不会将状态从服务器传输到客户端。因此，获取将在两端执行，因为客户端必须再次获取数据。
用法
我们建议使用 useFetch 或 useAsyncData + $fetch 来防止在获取组件数据时重复获取数据。
// 在 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')您可以在仅在客户端执行的方法中使用 $fetch。
<script setup lang="ts">
async function contactForm() {
await $fetch('/api/contact', {
method: 'POST',
body: { hello: 'world '}
})
}
</script>
<template>
<button @click="contactForm">Contact</button>
</template>
$fetch 是在 Nuxt 中进行 HTTP 调用的首选方式，而不是为 Nuxt 2 制作的 @nuxt/http 和 @nuxtjs/axios。
如果您在开发中使用 $fetch 调用带有自签名证书的（外部）HTTPS URL，您需要在环境中设置 NODE_TLS_REJECT_UNAUTHORIZED=0。
传递 Headers 和 Cookies
当我们在浏览器中调用 $fetch 时，用户的 headers 如 cookie 将直接发送到 API。
然而，在服务器端渲染期间，由于安全风险如 服务器端请求伪造 (SSRF) 或 身份验证滥用，$fetch 不会包含用户浏览器的 cookies，也不会传递 fetch 响应中的 cookies。
// 在 SSR 期间，这不会转发 headers 或 cookies
const { data } = await useAsyncData(() => $fetch('/api/cookies'))如果您需要在服务器上转发 headers 和 cookies，您必须手动传递它们：
// 这将把用户的 headers 和 cookies 转发到 `/api/cookies`
const requestFetch = useRequestFetch()
const { data } = await useAsyncData(() => requestFetch('/api/cookies'))然而，当在服务器上使用相对 URL 调用 useFetch 时，Nuxt 将使用 useRequestFetch 来代理 headers 和 cookies（除了不应转发的 headers，如 host）。