vue.js Nuxt useFetch在页面重新加载时不获取cookie

23c0lvtd  于 2023-10-23  发布在  Vue.js
关注(0)|答案(1)|浏览(290)

我试图调用一个API从我的快递服务器使用useFetch,它的工作,但如果我试图重新加载页面,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中使用false选项,这是可行的,但我想我也希望它在服务器上呈现。

ni65a41a

ni65a41a1#

首先,确保您的服务器将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的域以确保其可访问。
希望这对你有帮助!

编辑

让我们添加一些细节如何使用我以前的答案。
因此,创建一个中间件(例如middleware/cookieForwarder.js):

export default function (context) {
  if (process.server) {
    context.ssrContext.req.serverCookie = context.req.headers.cookie;
  }
}

然后,在组件中使用它:

<script setup>
    definePageMeta({
        middleware: ['auth', 'cookieForwarder']
    })

    let serverCookie;

    if (process.server) {
        serverCookie = useContext().ssrContext.req.serverCookie;
    }

    const headers = {};

    if (serverCookie) {
        headers['Cookie'] = serverCookie;
    }

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

在您的Express应用程序中(相应的标题和CORS相关设置):

const express = require('express');
const cors = require('cors');

const app = express();

app.use(cors({
    origin: 'YOUR_NUXT_APP_URL_HERE', // e.g., 'http://localhost:3000'
    credentials: true
}));

app.use((req, res, next) => {
    res.header('Access-Control-Allow-Credentials', 'true');
    next();
});

在Express App中的路线中:

res.cookie('cookieName', 'cookieValue', {
    httpOnly: true,
    domain: 'YOUR_DOMAIN_HERE',  // e.g., '.yourdomain.com' (the leading dot is for subdomains)
    path: '/'
});

考虑到最后一部分有点抽象,因为您没有提供express server的详细信息。但这个就够了。
希望这能再次帮助!

相关问题