How do I fix "is not a legal HTTP header value" in React Native?

This error stops your request before it’s sent, which is frustrating, but it also means the message already points at the problem. The text in front of “is not a legal HTTP header value” is the exact value that failed, and the same goes for “is not a legal HTTP header name”.

Why it happens

HTTP headers are plain text with strict rules about which characters they can contain. This wording comes from node-fetch, a fetch library for Node.js that many SDKs and tools use, where every header is checked before the request goes out:

• A header value can’t contain line breaks or other control characters, or characters outside the Latin-1 set, such as curly quotes or emoji.
• A header name can only contain letters, digits, and a few symbols like - and _, so a space, a colon, or an empty name fails.

Because node-fetch runs in Node.js, this exact message comes from code running on a server, in an API route, in a test, or in a script. React Native’s own fetch in the app doesn’t check values this way, so on a phone the same bad value can reach the server and come back as a 401 or 400 instead. A bad name shows up there as “Invalid character in header field name”.

Places the bad character can come from:

• a token read from a file, an environment variable, or a copy and paste, with a line break at the end
• a whole object in the header, like `Bearer ${JSON.stringify(session, null, 2)}`, which adds line breaks
• an API key pasted from a document that swapped straight quotes for curly ones
• a name written with its colon, like "Authorization:", or with the value inside it, like "Authorization Bearer"

How to fix it

1. Read the text before “is not a legal”. It’s the value or name that failed. Look for a stray {, a quote, or text that wraps onto a new line.

2. Print the header so hidden characters show up. console.log(JSON.stringify(token)) shows a trailing line break as \n instead of an invisible gap.

3. Send the field, not the object, and trim it:

   const token = session?.access_token?.trim();
   if (!token) throw new Error("No access token, sign in again");
   
   const res = await fetch(url, {
     headers: {
       Authorization: `Bearer ${token}`,
       "Content-Type": "application/json",
     },
   });

   The header name is just Authorization, and the colon between name and value is added for you.

4. Copy API keys again from the source if they passed through a document or chat, rather than editing the quotes by hand.

How you know it’s fixed

The request goes out and you get a real status code back from the server. If that status is 401, the header is now valid but the token itself is wrong or expired, which is a separate problem to fix in your sign-in code.

If it still fails

We’d also guard against a missing token, because a template string turns undefined into the text “undefined”, which passes this check, so you’d get Bearer undefined and a 401 rather than this error. The guard in step 3 catches that. If you need to send text in another language or script in a custom header, encode it with encodeURIComponent before you send it and decode it on the server.