Nuxt3服务器端如何获取Cookie值？useFetch调用异常解析

直接在浏览器访问接口时，请求由客户端（浏览器）发起，浏览器会自动携带当前域名下的jwt Cookie到服务器，因此接口能正常获取到值。

而Nuxt3中useFetch默认在SSR模式下会在服务器端发起请求，服务器端本身没有浏览器的Cookie上下文，自然拿不到客户端的jwt Cookie；即使是客户端hydration阶段调用，若未正确配置，也可能因请求头未携带Cookie导致返回undefined。

针对不同场景，有两种可行方案：

方案一：强制useFetch在客户端发起请求 #

给useFetch添加server: false配置，让请求完全在客户端执行，此时浏览器会自动携带Cookie：

<script setup>
const { data } = await useFetch('/api/show', {
  server: false
})
console.log(data.value?.cookie);
</script>

方案二：服务器端请求时传递客户端Cookie #

如果必须在服务器端发起请求（比如需要提前获取数据用于SSR渲染），可以通过useRequestHeaders获取客户端的请求头（包含Cookie），然后在useFetch的headers中传递：

<script setup>
// 获取客户端的Cookie请求头
const headers = useRequestHeaders(['cookie'])

const { data } = await useFetch('/api/show', {
  headers
})
console.log(data.value?.cookie);
</script>

你的现有接口代码无需修改，getCookie会自动从event中解析传递过来的Cookie值。

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