x-forwarded-port header is 'undefined' when no port in url

[yuvalotem]

Link to the code that reproduces this issue

https://github.com/yuvalotem1/x-forwarded-port-header--undefined-

To Reproduce

1. Create new next application
2. Inside pages/api/[...middleware].ts add this function -
   export default function apiMiddleware(req: NextApiRequest) {
   //this will log 'undefined'
   console.log('x-forwarded-port ', req.headers['x-forwarded-port ']);
   }
3. deploy to vercel
4. check the logs and see x-forwarded-port log

Current vs. Expected behavior

Expected behavior to not have the header/to have 80/443 as the default value
using http-proxy with api-router crashes because invalid x-forwarded-port header value 'undefined'

Provide environment information

Operating System:
  Platform: darwin
  Arch: arm64
  Version: Darwin Kernel Version 22.2.0: Fri Nov 11 02:03:51 PST 2022; root:xnu-8792.61.2~4/RELEASE_ARM64_T6000
Binaries:
  Node: 18.18.0
  npm: 9.8.1
  Yarn: 1.22.19
  pnpm: N/A
Relevant Packages:
  next: 14.1.1-canary.10 // Latest available version is detected (14.1.1-canary.10).
  eslint-config-next: N/A
  react: 18.2.0
  react-dom: 18.2.0
  typescript: 5.1.3
Next.js Config:
  output: N/A

Which area(s) are affected? (Select all that apply)

Middleware / Edge (API routes, runtime)

Which stage(s) are affected? (Select all that apply)

Vercel (Deployed)

Additional context

No response

_NEXT-2778

[AtaliaRefua]

Super important! Reproduced for me as well. Great job

[yuvalotem]

Opened a fix - #60484

[richardantao]

Until the fix gets merged, you can set a default manually before forwarding the request to the target server:
req.headers["x-forwarded-port"] ||= "80"

[yuvalotem]

@richardantao Also if using http-proxy a better approach will be using xfwd: true to override the Next.js implementation for these headers in middlewares

[Ethan-Arrowood]

Hi folks, I've clarified the reproduction for this issue. The x-forwarded-port is missing from any pages/api/ handler and any app router handler when deployed to Vercel.

In your reproduction notes @yuvalotem , you specify a route pages/api/[...middleware].ts. This is actually a pages API catch-all route. It is not to be confused with Next.js Middleware which is only specifiable via a root middleware.js/ts file.

A simpler reproduction is to have the two routes:

pages/api/pages-headers.js

export default function handler(req, res) {
    return res.status(200).json({ 'port': req.headers['x-forwarded-port'] });
  }

and

app/app-headers/route.js

import { NextResponse } from 'next/server';
export function GET(req) {
    return NextResponse.json({ 'port': req.headers.get('x-forwarded-port') });
  }

Run next build && next start locally, and you'll see these are defined.

Deploy to Vercel, and they will be undefined for the pages route, and null for the app route.

Working on an actual test case for this behavior and then I'll land your fix @yuvalotem . Thanks!