fix(nuxt): respect baseurl when redirecting (and universal router) (#4933)

* fix(nuxt): respect baseurl when redirecting (and universal router)

* test: add test case for redirect

packages/nuxt/src/app/composables/router.ts

@@ -1,6 +1,7 @@
 import type { Router, RouteLocationNormalizedLoaded, NavigationGuard, RouteLocationNormalized, RouteLocationRaw, NavigationFailure } from 'vue-router'
 import { sendRedirect } from 'h3'
-import { useNuxtApp } from '#app'
+import { joinURL } from 'ufo'
+import { useNuxtApp, useRuntimeConfig } from '#app'
 
 export const useRouter = () => {
   return useNuxtApp()?.$router as Router
@@ -66,7 +67,7 @@ export const navigateTo = (to: RouteLocationRaw, options: NavigateToOptions = {}
   if (process.server) {
     const nuxtApp = useNuxtApp()
     if (nuxtApp.ssrContext && nuxtApp.ssrContext.event) {
-      const redirectLocation = router.resolve(to).fullPath || '/'
+      const redirectLocation = joinURL(useRuntimeConfig().app.baseURL, router.resolve(to).fullPath || '/')
       return nuxtApp.callHook('app:redirected').then(() => sendRedirect(nuxtApp.ssrContext.event, redirectLocation, options.redirectCode || 301))
     }
   }

packages/nuxt/src/app/plugins/router.ts

@@ -1,5 +1,5 @@
 import { reactive, h } from 'vue'
-import { parseURL, parseQuery, withoutBase, isEqual } from 'ufo'
+import { parseURL, parseQuery, withoutBase, isEqual, joinURL } from 'ufo'
 import { createError } from 'h3'
 import { defineNuxtPlugin } from '..'
 import { callWithNuxt } from '../nuxt'
@@ -102,6 +102,7 @@ export default defineNuxtPlugin<{ route: Route, router: Router }>((nuxtApp) => {
     hooks[hook].push(guard)
     return () => hooks[hook].splice(hooks[hook].indexOf(guard), 1)
   }
+  const baseURL = useRuntimeConfig().app.baseURL
 
   const route: Route = reactive(getRouteFromPath(initialURL))
   async function handleNavigation (url: string, replace?: boolean): Promise<void> {
@@ -124,7 +125,7 @@ export default defineNuxtPlugin<{ route: Route, router: Router }>((nuxtApp) => {
       // Perform navigation
       Object.assign(route, to)
       if (process.client) {
-        window.history[replace ? 'replaceState' : 'pushState']({}, '', url)
+        window.history[replace ? 'replaceState' : 'pushState']({}, '', joinURL(baseURL, url))
         if (!nuxtApp.isHydrating) {
           // Clear any existing errors
           await callWithNuxt(nuxtApp, clearError)

test/basic.test.ts

@@ -148,12 +148,9 @@ describe('head tags', () => {
 
 describe('navigate', () => {
   it('should redirect to index with navigateTo', async () => {
-    const html = await $fetch('/navigate-to/')
+    const { headers } = await fetch('/navigate-to/', { redirect: 'manual' })
 
-    // Snapshot
-    // expect(html).toMatchInlineSnapshot()
-
-    expect(html).toContain('Hello Nuxt 3!')
+    expect(headers.get('location')).toEqual('/')
   })
 })
 
@@ -368,6 +365,15 @@ describe('dynamic paths', () => {
     }
   })
 
+  it('should use baseURL when redirecting', async () => {
+    process.env.NUXT_APP_BUILD_ASSETS_DIR = '/_other/'
+    process.env.NUXT_APP_BASE_URL = '/foo/'
+    await startServer()
+    const { headers } = await fetch('/foo/navigate-to/', { redirect: 'manual' })
+
+    expect(headers.get('location')).toEqual('/foo/')
+  })
+
   it('should allow setting CDN URL', async () => {
     process.env.NUXT_APP_BASE_URL = '/foo/'
     process.env.NUXT_APP_CDN_URL = 'https://example.com/'

test/fixtures/basic/pages/navigate-to.vue

@@ -3,5 +3,5 @@
 </template>
 
 <script setup>
-navigateTo('/', { replace: true })
+await navigateTo('/', { replace: true })
 </script>