Nuxt useFetch 在页面重新加载时未获取 cookie

Question

我尝试使用 useFetch 从我的 Express 服务器调用 api，它可以工作，但如果我尝试 重新加载页面，则 api 不会被调用。我的猜测是，httponly cookie 未附加到请求，或者 cookie 在重新加载期间不可用，因为当我从 Express api 中删除 checkTokenMiddleware 时，它可以工作。

<script setup>
    definePageMeta({
        middleware: 'auth'
    })

    const {data:posts} = await useFetch(useRuntimeConfig().public.API_URL+'/api/posts', {
        credentials: 'include',
    })
</script>

快递

PostRoute.get('/', [checkTokenMiddleware], getAllPost)

解决方法是在 useFetch 中添加 server: false 选项，该选项有效，但我想我也希望它在服务器上呈现。

Answer 1

首先，确保您的服务器将

Access-Control-Allow-Credentials

设置为 true：

res.header('Access-Control-Allow-Credentials', 'true');

另外，将此配置添加到您的 useFetch 中：

const { data: posts } = await useFetch(url, {
  credentials: 'include',
});

请记住，在服务器上，在 SSR 期间，来自传入请求的 cookie 可能不会附加到自动获取。为了确保在 SSR 期间将 cookie 转发到获取请求，您可能需要显式传递它们。

由于 useFetch 并不直接简单，请考虑使用 serverMiddleware 在 SSR 期间检查和转发 cookie。

if (process.server) {
  const cookie = req.headers.cookie;
}

最后，确保使用正确的域和路径设置

HttpOnly

cookie。如果您的 API 和 Nuxt 应用程序位于不同的子域，请相应地设置 cookie 的域以确保其可访问。

希望这有帮助！