nuxt/framework

How can i get the response headers on the client side?

liulib opened this issue · 1 comments

liulib commented

Environment

Nuxt project info: 12:35:52

  • Operating System: Windows_NT
  • Node Version: v16.17.1
  • Nuxt Version: 3.0.0
  • Nitro Version: 1.0.0
  • Package Manager: npm@8.15.0
  • Builder: vite
  • User Config: experimental, app, modules, intlify, css, unocss, build
  • Runtime Modules: @pinia/nuxt@0.4.3, @intlify/nuxt3@0.2.4, @unocss/nuxt@0.46.5
  • Build Modules: -

Reproduction

https://stackblitz.com/edit/nuxt-starter-zvb66h?file=pages/index.vue

Describe the bug

hey, sorry for the trouble. I'm new guy to the SSR.

I have tried both of these ways.

first :

in this way,headers awalys be empty object

client vue file

  // not work
  const url = 'http://www.vvvv.plus/api/article/getTopicList';
  const res = await $fetch.raw(url, {
    method: 'get',
  });

  // how can i get headers here ?
  console.log(res.headers);

second

i can get headers in the server side, but i don't know how to pass it to the client side.

I have check those discussions, but i can't find the answer.

this doc just dispeared https://github.com/nuxt/framework/discussions/1062

this doc is so simple,i don't konw how to use it https://nuxt.com/docs/api/composables/use-request-headers#userequestheaders

server side ts file

export default defineEventHandler(async (event) => {
  const response: any = await $fetch.raw(
    'http://www.vvvv.plus/api/article/getTopicList',
    {
      method: 'get',
    }
  );
  // we can get headers here
  console.log(response.headers);

  return response._data;
});

client vue file

const url = '/api/test';
const res = await useFetch(url);

// but here is empty
console.log(res.headers);

Additional context

No response

Logs

No response