Nuxt•2w ago

useRequestFetch does not pass cookie when path is not "/" on ssr

I have a refresh token API in the backend. The refresh token is saved to cookie storage during login with path specific to the refresh token API (e.g. path=/api/refresh-token). However, whenever I try to call this API during SSR in frontend and debug with the backend refresh token API, refresh token value from cookie is always empty. This is how I make a request with useRequestFetch.

const requestFetch = useRequestFetch()
const postResponse = async (
    endpoint: string,
    body?: object,
  ) => {
    const response = await requestFetch(endpoint, {
      baseURL: config.public.domain,
      method: HTTP_METHOD_POST,
      body,
    })
    return response
  }

const { data, error } = await useAsyncData(async () => await postResponse('/api/refresh-token'))

const requestFetch = useRequestFetch()
const postResponse = async (
    endpoint: string,
    body?: object,
  ) => {
    const response = await requestFetch(endpoint, {
      baseURL: config.public.domain,
      method: HTTP_METHOD_POST,
      body,
    })
    return response
  }

const { data, error } = await useAsyncData(async () => await postResponse('/api/refresh-token'))

NOTE: * I have also tried to useFetch but similar issue occurs. * Client-side fetch passes cookie as expected using the above postResponse method.

6 Replies

kapa.ai•2w ago

Hi @bvttercvp. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- I understand your issue with cookies not being passed correctly during SSR when the cookie path is not "/". This is a known behavior in Nuxt when dealing with cookies during server-side rendering. Why This Happens When making server-side requests in Nuxt, cookies are not automatically forwarded to external APIs unless they're properly handled. This is especially true when the cookie has a specific path like /api/refresh-token. According to the documentation, during server-side rendering, due to security considerations like Server-Side Request Forgery (SSRF) or Authentication Misuse, $fetch doesn't automatically include the user's browser cookies Passing Headers and Cookies. Solution There are a couple of approaches to solve this: 1. Explicitly Pass Cookie Headers When using useRequestFetch or useFetch, you need to explicitly pass the cookie headers:

const requestFetch = useRequestFetch()
const postResponse = async (endpoint: string, body?: object) => {
  const response = await requestFetch(endpoint, {
    baseURL: config.public.domain,
    method: HTTP_METHOD_POST,
    headers: useRequestHeaders(['cookie']),
    body,
  })
  return response
}

const { data, error } = await useAsyncData(async () => await postResponse('/api/refresh-token'))

const requestFetch = useRequestFetch()
const postResponse = async (endpoint: string, body?: object) => {
  const response = await requestFetch(endpoint, {
    baseURL: config.public.domain,
    method: HTTP_METHOD_POST,
    headers: useRequestHeaders(['cookie']),
    body,
  })
  return response
}

const { data, error } = await useAsyncData(async () => await postResponse('/api/refresh-token'))

2. Use useRequestEvent to Manually Handle Cookies For more control, you can use useRequestEvent to manually handle the cookies:

const event = useRequestEvent()

const response = await $fetch('/api/refresh-token', {
  method: 'POST',
  headers: useRequestHeaders(['cookie']),
  onResponse({ response }) {
    const cookies = response.headers.getSetCookie()
if (cookies.length && event) {
      cookies.forEach((cookie) => {
        appendResponseHeader(event, 'set-cookie', cookie)
      })
    }
  },
})

const event = useRequestEvent()

const response = await $fetch('/api/refresh-token', {
  method: 'POST',
  headers: useRequestHeaders(['cookie']),
  onResponse({ response }) {
    const cookies = response.headers.getSetCookie()
if (cookies.length && event) {
      cookies.forEach((cookie) => {
        appendResponseHeader(event, 'set-cookie', cookie)
      })
    }
  },
})

This approach was mentioned as a solution in a similar Stack Overflow question Nuxt3 server setCookie - cookie value does not change. Additional Context The issue you're experiencing is documented in several GitHub issues: - Pass cookies from server-side API calls on SSR response - Defining $fetch within useFetch() doesn't pass cookies on SSR It's important to note that this behavior is intentional for security reasons, as explained in the Nuxt documentation. The useFetch composable uses useRequestFetch under the hood to automatically forward the request context and headers, but you may need to be explicit about which headers to forward. Let me know if you need further clarification or have any other questions! ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2w ago

<@1080330519776084090> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

bvttercvpOP•2w ago

@kapa.ai the provided github and stackoverflow issues are not the same with this. The issue here is that cookies that do not have path=/ are not being sent to the refresh token api.

kapa.ai•2w ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- You're right, I apologize for the confusion. The specific issue you're facing is different - it's about cookies with non-root paths not being sent during SSR requests. Looking more closely at the knowledge sources, I can see this is a more specific problem related to how cookies with specific paths are handled during server-side requests in Nuxt. When a cookie has a path that's not "/", Nuxt's useRequestFetch may not be correctly forwarding it during SSR. This is because during server-side rendering, cookies are extracted from request headers and only cookies that match the request path would typically be included. From the YouTube video source, Alexander Lichter explains that when making subrequests during SSR, you need to properly pass the event context and headers to ensure cookies are forwarded correctly Nuxt 3: Passing Cookies with event.$fetch and useRequestFetch in Nuxt. Unfortunately, the knowledge sources don't provide a specific solution for your exact issue with path-specific cookies. The standard approach of using useRequestHeaders(['cookie']) should theoretically forward all cookies from the original request, but it appears that path-specific cookies might be handled differently. You might need to: 1. Try explicitly extracting and forwarding the specific cookie you need 2. Consider modifying your cookie path to be more inclusive (though this has security implications) 3. Use a more direct approach with useRequestEvent() to access and forward the specific cookie Since the knowledge sources don't contain a definitive solution for this specific scenario, I recommend: 1. Opening an issue on the Nuxt GitHub repository to get guidance from the core team 2. Checking if the new refreshCookie utility (available since Nuxt v3.10) might help with your use case, though it's primarily designed for refreshing cookie values after they've changed I apologize that I can't provide a more concrete solution based on the available knowledge sources. I'm here to help you troubleshoot this issue further if you'd like to explore other approaches. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2w ago

<@1080330519776084090> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

bvttercvpOP•2w ago

If anyone stumbled upon this issue, I have made the refresh in client-side, then call refresh method of useFetch or useAsyncData to retrieve the new token from an httponly cookie.

Gaming

Programming

useRequestFetch does not pass cookie when path is not "/" on ssr

Did you find this page helpful?