h3 server looses cookies on page-load/page-reload

[folamy]

Environment

• Operating System: Linux OS/Fedora
• Node Version: v16.11.0
• Nuxt Version: 3.0.0-27385241.dcc0c9
• Package Manager: yarn@1.22.17
• Bundler: Vite

Reproduction

nil

Describe the bug

Having a page where I need to get user's session/cookie data from the server/backend:
Firstly, on SSR, there is no Cookie on useNuxtApp().ssrContext.req.headers! (This would have sufficed for my use case)

secondly, I tried a workaround option like this

// server/api/student/reqister
import type { IncomingMessage, ServerResponse } from 'http'
import { setCookie } from 'h3

export default async (req: IncomingMessage, res: ServerResponse) => {
  const body = await useBody(req)
  // do a db operation that returns an object containing registered student
  const { registeredStudent } = await AddStudent(body)
   setCookie(res, 'registeredStudent', JSON.stringify(registeredStudent))
  return registeredStudent
}

// server/api/student/get-data
import type { IncomingMessage, ServerResponse } from 'http'
import { useCookies } from 'h3

export default async (req: IncomingMessage, res: ServerResponse) => {
  return useCookies(req)
}

// pages/student/confirm-user-registration
<script setup lang="ts">
const { data } =  await useAsyncData('get-user-data', () => $fetch('/api/student/get-data'))
console.log(data.value) 
// this works on router navigation within the browser
// But it doesn't work on page reload 
</script>

I need to get the data before Vue renders the page

Additional context

No response

Logs

No response

[danielroe]

Try using useRequestHeaders(). This should explain why: http://v3.nuxtjs.org/docs/usage/data-fetching#isomorphic-fetch

Note that if you also want to set a cookie on SSR you'll need to do so yourself within asyncData.

[folamy]

Try using useRequestHeaders(). This should explain why: http://v3.nuxtjs.org/docs/usage/data-fetching#isomorphic-fetch

Note that if you also want to set a cookie on SSR you'll need to do so yourself within asyncData.

are you suggesting that I should do this?

const { data } = useFetch(/api/student/get-data', {
  headers: useRequestHeaders(['cookie'])
})