Nuxt•4w ago

How to pass the httpOnly session cookie received in a client api call to server nitro $fetch ?

I have nuxt-auth module that calls /me, /login endpoint from the client--which uses the session cookie correctly. And for rest of the requests I am using nuxt server directory because I quite like the idea. I have a Nuxt 4 server API endpoint (/server/api/admin/users/index.get.ts) that needs to make an external API call using $fetch. The external API requires session cookies for authentication. Problem: When a client makes a request to my Nuxt API endpoint server, the httpOnly session cookies from that request are not automatically forwarded to the external API call made with nitro $fetch. I m currently trying this but this doesn't work. My theory is the session cookie is not being forwarded from the client to the server. My app is in spa mode. So whats the correct approach here? Any help would be highly appreciated.

2 Replies

kapa.ai•4w ago

Hi @Decisive Lieutenant. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- To forward the httpOnly session cookie from the client request to an external API call made within your Nuxt server API endpoint, you need to manually extract the cookie from the incoming request and include it in the headers of your $fetch call. Nitro's $fetch (and also Nuxt's $fetch) does not automatically forward cookies from the incoming client request to outgoing server-side requests for security reasons—this is a common source of confusion and is documented in the Nuxt ecosystem. You must explicitly pass the cookies yourself when proxying or making subrequests on the server side. How to do it: 1. Extract the cookie from the incoming request using useRequestHeaders or similar. 2. Pass the cookie in the headers of your $fetch call to the external API. Here’s a pattern you can use in your Nuxt server API endpoint:

import { defineEventHandler, useRequestHeaders } from 'h3'
import { $fetch } from 'ofetch'

export default defineEventHandler(async (event) => {
  // Extract cookies from the incoming request
  const headers = useRequestHeaders(['cookie'])

  // Forward the cookies to the external API
  const response = await $fetch('<https://external-api.example.com/endpoint',> {
    headers: {
      cookie: headers.cookie || ''
    }
    // ...other options
  })

  return response
})

import { defineEventHandler, useRequestHeaders } from 'h3'
import { $fetch } from 'ofetch'

export default defineEventHandler(async (event) => {
  // Extract cookies from the incoming request
  const headers = useRequestHeaders(['cookie'])

  // Forward the cookies to the external API
  const response = await $fetch('<https://external-api.example.com/endpoint',> {
    headers: {
      cookie: headers.cookie || ''
    }
    // ...other options
  })

  return response
})

Key points: - This approach works for httpOnly cookies because they are present in the request headers sent from the browser to your server. - You must manually forward the cookie header; it is not done automatically by $fetch or Nitro for security reasons [docs: explain why headers not forwarded when using $fetch on the server]. - This pattern is also used when proxying requests and handling authentication/session cookies [Nuxt3 server setCookie - cookie value does not change, what could be problem?]. Caveats: - If you are using SPA mode, ensure that the client is sending the cookies with the request to your Nuxt server endpoint. - If you need to set cookies on the response from the external API, you must also manually forward Set-Cookie headers from the external API response to the client, as they are not automatically proxied [Nuxt3 server setCookie - cookie value does not change, what could be problem?]. Summary:
You must manually extract and forward the session cookie from the incoming request to the external API call in your server endpoint. This is the recommended and secure approach in Nuxt/Nitro [docs: explain why headers not forwarded when using $fetch on the server]. If you need to handle Set-Cookie headers from the external API, see the linked Stack Overflow answer for an example of how to append those cookies to your server response. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•4w ago

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

Gaming

Programming

How to pass the httpOnly session cookie received in a client api call to server nitro $fetch ?

Did you find this page helpful?