Middleware on localhost redirects to relative URL, even when provided with absolute one

[devklepacki]

Verify canary release

• I verified that the issue exists in the latest Next.js canary release

Provide environment information

Binaries:
  Node: 18.12.0
  npm: 8.19.2
  Yarn: 1.22.19
  pnpm: 7.21.0
Relevant packages:
  next: 13.1.1-canary.1
  eslint-config-next: 13.0.7
  react: 18.2.0
  react-dom: 18.2.0

Which area(s) of Next.js are affected? (leave empty if unsure)

Middleware / Edge (API routes, runtime)

Link to the code that reproduces this issue

https://github.com/devklepacki/reproduction-middleware-redirect

To Reproduce

1. Setup project locally, run it and keep the terminal opened
2. In a browser open Network in DevTools and go to http://foobar.localhost:3000
3. Middleware's logic should redirect you to http://localhost:3000/signin?domainKey=foobar
4. But instead you will be redirected to http://foobar.localhost:3000/signin?domainKey=foobar
5. The reason is that In the Network tab response location was a relative URL: /signin?domainKey=foobar
6. You can verify in the server terminal that middleware's logic is working properly and the final URL was not relative http://localhost:3000/signin?domainKey=foobar

Describe the Bug

Next.js middleware redirects to a different URL on localhost (wrong URL) and when deployed to Vercel (works correctly).

I'm doing a simple redirect from foobar.example.com to app.example.com/signin?key=foobar.

When deployed it works as expected. But on localhost final redirection using NextResponse.redirect() is relative /auth/signin?key=foobar, even though the final string is correct: http://localhost:3000/auth/signin?key=foobar. Example below:

It's clearly visible in the Network Headers tab:

Request URL: http://foobar.localhost:3000/
Response location: /auth/signin?key=foobar (should be http://localhost:3000/auth/signin?key=foobar)

So it's clearly middleware's fault to redirect to a relative path. even when absolute is supplied.

Expected Behavior

NextResponse.redirect('http://localhost:3000/foo/bar') should redirect to the absolute path on localhost, instead of relative path /foo/bar.

Which browser are you using? (if relevant)

No response

How are you deploying your application? (if relevant)

Vercel

[joshstar]

Can confirm the same issue, though for us the relative url results in a 500 Invalid URL error within next-url. Local node and production edge vercel work without issue but local edge causes this error.

For the moment I'm working around the issue by making all redirect urls a full url instead of just the path.

Edit: Rereading your post my issue might be different actually, though likely related.

[devklepacki]

I was trying to read my original post and it's so unclear what it's about. But all in all this is the best summary:

NextResponse.redirect('http://localhost:3000/foo/bar') is redirecting to the relative path /foo/bar, instead of full URL.

Explanation:

1. In a browser go to URL foo.localhost:3000
2. Using middleware try to redirect to localhost:3000/foo - it will not work.

The redirect will be to foo.localhost:3000/foo instead.

[haozhun]

@devklepacki, I have the same issue. Did you find a workaround for this?

[devklepacki]

@haozhun actually no. In my case that was not a core or a very dynamic feature. So I just assumed that if on dev I get redirected to foo.localhost:3000/foo and on production it works ok, then it's ok.

[haozhun]

I worked around this issue by adding --hostname fakehostname.localhost to next dev invocation.

[yannbolliger]

Can confirm this