N
Nuxt•3w ago
Helfo

Redirect from server handler

Hi, I wonder if it's possible to call 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);
})
2 Replies
kapa.ai
kapa.ai•3w ago
Hi @Helfo. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- The code you've provided is correct for performing a server-side redirect in Nuxt, but there are a few important points to consider: 1. Server-side redirects using sendRedirect work differently from client-side navigation. 2. When you use 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: 1. The server receives the request and sends a 301 redirect response. 2. The useFetch composable receives this response on the client side. 3. However, useFetch doesn't automatically navigate to the new URL. To handle this situation, you have a couple of options: 1. 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)
}
2. Use navigateTo on the server side instead of sendRedirect: 
export default defineEventHandler((event) => {
  return navigateTo('/posts/123', { redirectCode: 301 })
})
export default defineEventHandler((event) => {
  return navigateTo('/posts/123', { redirectCode: 301 })
})
The navigateTo 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: - Nuxt 3 Navigation - Nuxt 3 Server Utilities 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
kapa.ai•3w ago
<@478912506841006086> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

Did you find this page helpful?