Sending Non-Iso Headers over API

[cobaltwhite]

Verify canary release

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

Provide environment information

Operating System:
  Platform: win32
  Arch: x64
  Version: Windows 10 
Binaries:
  Node: 16.16.0
  npm: N/A
  Yarn: N/A
  pnpm: N/A
Relevant packages:
  next: 13.1.1
  eslint-config-next: 13.0.2
  react: 18.2.0
  react-dom: 18.2.0

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

Routing (next/router, next/navigation, next/link)

Link to the code that reproduces this issue

N/A

To Reproduce

Simply create a post.ts api endpoint and try to pass on a non-iso value by the provided fetch call. Text that can be passed in non-iso format: امارات

Describe the Bug

When sending a non-iso query as string via the header (arabic/persian), the following error occurs.

Unhandled Runtime Error
TypeError: Failed to execute 'fetch' on 'Window': Failed to read the 'headers' property from 'RequestInit': String contains non ISO-8859-1 code point.

I have called the ultimate end point directly and the query returns succesfully. So I assume this is a bug within the framework.

    const res = await fetch(`/api/v1/posts`, {
      headers: {
        Accept: `application/json`,
        Authorization: `Bearer xxxx`,
        SearchQuery: q,
      },
    });

Expected Behavior

Unable to send non-iso characters over header to Next.JS internal API. It works if the third part API endpoint is called direct.

Which browser are you using? (if relevant)

Chrome, Version 108.0.5359.125 (Official Build) (64-bit)

How are you deploying your application? (if relevant)

Local Machine

[balazsorban44]

This is unrelated to Next.js. You can test this by trying to evaluate new Headers({SearchQuery: "امارات"}) in the browser's inspector.

Chrome:

Uncaught TypeError: Failed to construct 'Headers': String contains non ISO-8859-1 code point.
    at <anonymous>:1:1

Firefox:

Uncaught TypeError: Headers constructor: Cannot convert value in record<ByteString, ByteString> branch of (sequence<sequence<ByteString>> or record<ByteString, ByteString>) to ByteString because the character at index 0 has value 1575 which is greater than 255.
    <anonymous> debugger eval code:1

Relevant spec:

• https://fetch.spec.whatwg.org/#header-value
• https://infra.spec.whatwg.org/#byte-sequence
• https://infra.spec.whatwg.org/#byte

List of allowed characters: https://www.w3schools.com/charsets/ref_html_8859.asp

You can wrap the value with encodeURIComponent, and then decode it on the backend with decodeURIComponent, or alternatively send the value in a query parameter as fetch("/api/v1/posts?q=امارات").

[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.