Nuxt•10mo ago

Proxy with header

What is the recommended way to proxy requests?
My frontend will log in using auth0. The access token is needed to talk to the api at a subdomain.
Currently the access_token is in the session cookie encrypted(secret)

kapa.ai•3/13/25, 1:06 PM

Hi @nandi95. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base.

kapa.ai•3/13/25, 1:06 PM

----------------------
Based on the knowledge sources, there are two recommended approaches for proxying requests in Nuxt while handling authentication tokens:

Recommended Proxy Approaches

According to the YouTube video on Nuxt proxying strategies, there are two recommended approaches:

Nitro proxy API endpoint
- Creating a server route that forwards requests to your API
Proxy routeRule
- Using Nitro's route rules for proxying

Nuxt 3: The BEST way to proxy your API in Nuxt

Handling Authentication with Proxy

Since you have your access token stored in an encrypted session cookie, here's how you can implement a proxy that forwards this token to your API:

Option 1: Create a Nitro proxy endpoint

Option 2: Forward cookies and headers

You can also use the built-in utilities to forward cookies and headers:

```javascript
// composables/fetch.ts
import { appendResponseHeader } from 'h3'
import type { H3Event } from 'h3'

kapa.ai•3/13/25, 1:07 PM

export const fetchWithCookie = async (event: H3Event, url: string) => {
/* Get the response from the server endpoint /
const res = await $fetch.raw(url, {
headers: {
// Include the authorization header
Authorization:
}
})
/ Get the cookies from the response /
const cookies = res.headers.getSetCookie()
/ Attach each cookie to our incoming Request /
for (const cookie of cookies) {
appendResponseHeader(event, 'set-cookie', cookie)
}
/ Return the data of the response */
return res._data
}

javascript
<script setup>
const { data } = await useFetch('/api/confidential', {
headers: useRequestHeaders(['cookie'])
})
</script>

javascript
// server/api/user/stats.get.ts
export default defineEventHandler(async (event) => {
// make sure the user is logged in
// This will throw a 401 error if the request doesn't come from a valid user session
const { user } = await requireUserSession(event)

// Your API logic here
return {}
});
```

Docs > Guide > Recipes > Sessions and Authentication

kapa.ai•3/13/25, 1:07 PM

This approach ensures that your API routes are protected and only accessible to authenticated users, while properly forwarding the authentication token to your API.
----------------------
Note: you can ask me a follow up question by @ mentioning me again

----------------------

kapa.ai•3/13/25, 1:07 PM

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

nandi95OP•3/13/25, 1:10 PM

I take it I have to do option one? no option for defining this as a routeRule

Cue•3/13/25, 2:45 PM

@nandi95 you can proxy via

routeRules

routeRules

, it is covered in the documentation. However, this method will drop certain headers, specifically the header, which can lead to problems if your API depends on it. For example, in Laravel, exceptions are rendered as HTML if the header is not set accordingly.

nandi95OP•3/13/25, 2:46 PM

indeed I guess the question was if I can dynamically add headers: Authorization one specifically

nandi95OP•3/13/25, 2:46 PM

no matter there's an h3 thing called whihc is helpful

Nnandi95 no matter there's an h3 thing called `proxyRequest` whihc is helpful

Cue•3/13/25, 2:47 PM

Indeed that is the way forward, particularly if you’re sending headers that are dependent during runtime (e.g. access tokens)

nandi95OP•3/13/25, 2:47 PM

yeah

nandi95OP•3/13/25, 2:47 PM

thank you