Nuxt•12mo ago

Redirect from server handler

Hi, I wonder if it's possible to call

useFetch

useFetch

from FE and BE will redirect you to other Nuxt page like this

This doesn't work for me (Should it?)

export default defineEventHandler((event) => {
  return sendRedirect(event, '/posts/123', 301);
})

export default defineEventHandler((event) => {
  return sendRedirect(event, '/posts/123', 301);
})

export default defineEventHandler((event) => {
  return sendRedirect(event, '/posts/123', 301);
})

export default defineEventHandler((event) => {
  return sendRedirect(event, '/posts/123', 301);
})

kapa.ai•1/17/25, 7:39 PM

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

kapa.ai•1/17/25, 7:39 PM

----------------------
The code you've provided is correct for performing a server-side redirect in Nuxt, but there are a few important points to consider:

Server-side redirects using sendRedirectsendRedirect work differently from client-side navigation.
When you use
```
useFetch
```
```
useFetch
```
on the frontend to call this endpoint, the redirect will happen on the server, but the client won't automatically follow it.

Here's what's happening:

The server receives the request and sends a 301 redirect response.
The
```
useFetch
```
```
useFetch
```
composable receives this response on the client side.
However,
```
useFetch
```
```
useFetch
```
doesn't automatically navigate to the new URL.

To handle this situation, you have a couple of options:

Handle the redirect manually on the client side:

const { error } = await useFetch('/api/your-endpoint')
if (error.value?.statusCode === 301) {
  navigateTo(error.value.statusMessage)
}

const { error } = await useFetch('/api/your-endpoint')
if (error.value?.statusCode === 301) {
  navigateTo(error.value.statusMessage)
}

Use navigateTonavigateTo on the server side instead of sendRedirectsendRedirect:

export default defineEventHandler((event) => {
  return navigateTo('/posts/123', { redirectCode: 301 })
})

export default defineEventHandler((event) => {
  return navigateTo('/posts/123', { redirectCode: 301 })
})

The navigateTonavigateTo function works on both client and server side in Nuxt 3, making it a more versatile option for handling redirects.

For more information on redirects and navigation in Nuxt 3, you can refer to:

Remember that server-side redirects are primarily useful for SEO purposes or when you need to redirect before any client-side code is executed. For most in-app navigations, using client-side navigation methods is generally preferred for a smoother user experience.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------

kapa.ai•1/17/25, 7:39 PM

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

Redirect from server handler

Similar Threads

Similar Threads

Similar Threads