fix(next): properly instantiates req.url on localhost (#11455)

The `req.url` property at the page level was not reflective of the
actual URL on localhost. This was because we were passing an
incompatible `url` override into `createLocalReq` (lacking protocol).
This would silently fail to construct the URL object, ultimately losing
the top-level domain on `req.url` as well as the port on `req.origin`
(see #11454).

Closes #11448.

Author: jacobsfletch

packages/next/src/utilities/initPage/index.ts

@@ -1,8 +1,7 @@
 import type { InitPageResult, VisibleEntities } from 'payload'
 
-import { headers as getHeaders } from 'next/headers.js'
 import { notFound } from 'next/navigation.js'
-import { getPayload, isEntityHidden, parseCookies } from 'payload'
+import { isEntityHidden } from 'payload'
 import * as qs from 'qs-esm'
 
 import type { Args } from './types.js'
@@ -40,8 +39,8 @@ export const initPage = async ({
           ignoreQueryPrefix: true,
         }),
       },
+      urlSuffix: `${route}${searchParams ? queryString : ''}`,
     },
-    urlSuffix: `${route}${searchParams ? queryString : ''}`,
   })
 
   const {

packages/next/src/utilities/initReq.ts

@@ -53,13 +53,11 @@ export const initReq = async function ({
   importMap,
   key,
   overrides,
-  urlSuffix,
 }: {
   configPromise: Promise<SanitizedConfig> | SanitizedConfig
   importMap: ImportMap
   key: string
   overrides?: Parameters<typeof createLocalReq>[0]
-  urlSuffix?: string
 }): Promise<Result> {
   const headers = await getHeaders()
   const cookies = parseCookies(headers)
@@ -96,14 +94,14 @@ export const initReq = async function ({
     const { i18n, languageCode, payload, responseHeaders, user } = partialResult
 
     const { req: reqOverrides, ...optionsOverrides } = overrides || {}
+
     const req = await createLocalReq(
       {
         req: {
           headers,
           host: headers.get('host'),
           i18n: i18n as I18n,
           responseHeaders,
-          url: `${payload.config.serverURL}${urlSuffix || ''}`,
           user,
           ...(reqOverrides || {}),
         },
@@ -115,6 +113,7 @@ export const initReq = async function ({
     const locale = await getRequestLocale({
       req,
     })
+
     req.locale = locale?.code
 
     const permissions = await getAccessResults({

packages/payload/src/utilities/createLocalReq.ts

@@ -23,7 +23,7 @@ function getRequestContext(
   }
 }
 
-const attachFakeURLProperties = (req: Partial<PayloadRequest>) => {
+const attachFakeURLProperties = (req: Partial<PayloadRequest>, urlSuffix?: string) => {
   /**
    * *NOTE*
    * If no URL is provided, the local API was called outside
@@ -38,13 +38,20 @@ const attachFakeURLProperties = (req: Partial<PayloadRequest>) => {
       return urlObject
     }
 
-    const fallbackURL = `http://${req.host || 'localhost'}`
+    const fallbackURL = `http://${req.host || 'localhost'}${urlSuffix || ''}`
 
-    const urlToUse = req?.url || req.payload.config?.serverURL || fallbackURL
+    const urlToUse =
+      req?.url || req.payload.config?.serverURL
+        ? `${req.payload.config.serverURL}${urlSuffix || ''}`
+        : fallbackURL
 
     try {
       urlObject = new URL(urlToUse)
     } catch (_err) {
+      req.payload.logger.error(
+        `Failed to create URL object from URL: ${urlToUse}, falling back to ${fallbackURL}`,
+      )
+
       urlObject = new URL(fallbackURL)
     }
 
@@ -85,13 +92,14 @@ type CreateLocalReq = (
     fallbackLocale?: false | TypedLocale
     locale?: string
     req?: Partial<PayloadRequest>
+    urlSuffix?: string
     user?: User
   },
   payload: Payload,
 ) => Promise<PayloadRequest>
 
 export const createLocalReq: CreateLocalReq = async (
-  { context, fallbackLocale, locale: localeArg, req = {} as PayloadRequest, user },
+  { context, fallbackLocale, locale: localeArg, req = {} as PayloadRequest, urlSuffix, user },
   payload,
 ) => {
   const localization = payload.config?.localization
@@ -131,7 +139,7 @@ export const createLocalReq: CreateLocalReq = async (
   req.routeParams = req?.routeParams || {}
   req.query = req?.query || {}
 
-  attachFakeURLProperties(req)
+  attachFakeURLProperties(req, urlSuffix)
 
   return req as PayloadRequest
 }