[Next 9.5.4] [ERR_INVALID_CHAR]: Invalid character in header content ["Location"]

[yk1979]

Bug report

Describe the bug

internal server error occurs when redirect path includes query strings of non-ascii character(like Japanese).

in this PR, non-ascii character is passed to 'Location' header without encoding.
https://github.com/vercel/next.js/pull/17323/files

To Reproduce

0. Set next.config.js with trailing slash config true.

<!-- next.config.js -->
module.exports = {
  trailingSlash: true
};

1. Open link with query strings of non-ascii character

<!-- indes.jsx -->
export default function IndexPage() {
  return (
    <div>
      <a href="/about?tag=日本語">
        with query strings
      </a>
    </div>
  );
}

3. Redirected to /about?tag=日本語 page, not /about/?tag=日本語. and 500 error occurs.

TypeError [ERR_INVALID_CHAR]: Invalid character in header content ["Location"]
    at ServerResponse.setHeader (_http_outgoing.js:488:3)
    at Object.fn (/node_modules/next/next-server/server/next-server.ts:569:15)
    at Router.execute (/node_modules/next/next-server/server/router.ts:200:40)
    at processTicksAndRejections (internal/process/task_queues.js:93:5)
    at DevServer.run (/node_modules/next/next-server/server/next-server.ts:855:23)

here is a demo.
https://codesandbox.io/s/non-ascii-query-error-c8esl

Expected behavior

redirected to /about/?tag=日本語, with trailing slash.
otherwise, encode japanese character.

[ka2jun8]

It seems to be fixed by this PR #18149 .
I checked my forked code sandbox using next.js canary release version (v9.5.6-canary.13).
It can be running without error.

https://codesandbox.io/s/non-ascii-query-error-forked-6p2ho

[PepijnSenders]

Can confirm that this was fixed in the v10 release of next.js as well.

[ijjk]

Closing as this should be resolved now per the above comments

[eduludi]

Looks like this problem persists somehow (or is related).

We are getting 500 errors when requests to our site include a slash before the url query, and due an invalid character in it node-server throws a 500 error:

TypeError [ERR_INVALID_CHAR]: Invalid character in header content ["Location"]

Here is a codesandbox to reproduce this issue:
https://codesandbox.io/s/nextjs-bug-errinvalidchar-invalid-character-in-header-content-location-ukhrh

Should I open a new issue? Thanks!

[hinsxd]

We encountered this problem when trying to redirect to a url with non-ascii characters

Our solution: wrap the non-ascii characters with encodeURIComponent. Done.

[omar-dulaimi]

The error occurs in these lines:

const updatedDestination=(0,_url.format)(parsedDestination);
res.setHeader('Location',updatedDestination);
res.statusCode=(0,_loadCustomRoutes.getRedirectStatus)(redirectRoute);// Since IE11 doesn't support the 308 header add backwards
// compatibility using refresh header
if(res.statusCode===308){
   res.setHeader('Refresh',`0;url=${updatedDestination}`);
}

if you wrap updatedDestination with encodeURI then the problem gets solved.

I'm at v9.5.2 so I guess it was solved at later versions.

[github-actions]

This closed issue has been automatically locked because it had no new activity for a month. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.