我试图调用一个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选项,这是可行的,但我想我也希望它在服务器上呈现。
1条答案
按热度按时间ni65a41a1#
首先,确保您的服务器将
Access-Control-Allow-Credentials
设置为true:另外,将此配置添加到useFetch:
请记住,在服务器上,在SSR期间,来自传入请求的cookie可能不会自动附加。为了确保在SSR期间将cookie转发到获取请求,您可能需要显式传递它们。
由于使用useFetch并不直接,因此可以考虑使用serverMiddleware在SSR期间检查和转发cookie。
最后,确保
HttpOnly
cookie设置了正确的域和路径。如果您的API和Nuxt应用位于不同的子域,请相应地设置Cookie的域以确保其可访问。希望这对你有帮助!
编辑
让我们添加一些细节如何使用我以前的答案。
因此,创建一个中间件(例如
middleware/cookieForwarder.js
):然后,在组件中使用它:
在您的Express应用程序中(相应的标题和CORS相关设置):
在Express App中的路线中:
考虑到最后一部分有点抽象,因为您没有提供express server的详细信息。但这个就够了。
希望这能再次帮助!