fix(nuxt): add `baseURL` to island fetch requests (#22009)

packages/nuxt/src/app/components/nuxt-island.ts

@@ -4,13 +4,13 @@ import { hash } from 'ohash'
 import { appendResponseHeader } from 'h3'
 import { useHead } from '@unhead/vue'
 import { randomUUID } from 'uncrypto'
-import { withQuery } from 'ufo'
+import { joinURL, withQuery } from 'ufo'
 import type { FetchResponse } from 'ofetch'
 
 // eslint-disable-next-line import/no-restricted-paths
 import type { NuxtIslandResponse } from '../../core/runtime/nitro/renderer'
 import { getFragmentHTML, getSlotProps } from './utils'
-import { useNuxtApp } from '#app/nuxt'
+import { useNuxtApp, useRuntimeConfig } from '#app/nuxt'
 import { useRequestEvent } from '#app/composables/ssr'
 
 const pKey = '_islandPromises'
@@ -39,6 +39,7 @@ export default defineComponent({
     }
   },
   async setup (props, { slots }) {
+    const config = useRuntimeConfig()
     const nuxtApp = useNuxtApp()
     const hashId = computed(() => hash([props.name, props.props, props.context]))
     const instance = getCurrentInstance()!
@@ -105,7 +106,8 @@ export default defineComponent({
         appendResponseHeader(event, 'x-nitro-prerender', url)
       }
       // TODO: Validate response
-      const r = await eventFetch(withQuery(url, {
+      // $fetch handles the app.baseURL in dev
+      const r = await eventFetch(withQuery(process.dev && process.client ? url : joinURL(config.app.baseURL ?? '', url), {
         ...props.context,
         props: props.props ? JSON.stringify(props.props) : undefined
       }))

test/basic.test.ts

@@ -1751,6 +1751,17 @@ describe('component islands', () => {
 
     await page.close()
   })
+
+  it.skipIf(isDev())('should not render an error when having a baseURL', async () => {
+    process.env.NUXT_APP_BASE_URL = '/foo/'
+    await startServer()
+
+    const result = await fetch('/foo/islands')
+    expect(result.status).toBe(200)
+
+    process.env.NUXT_APP_BASE_URL = undefined
+    await startServer()
+  })
 })
 
 describe.runIf(isDev() && !isWebpack)('vite plugins', () => {