react-native

React Native iOS does not add Authorization header, works on Android

I'm having an issue where the Authorization header is not being added to the request on iOS, it works on Android.

At first I thougt it was axios, the http client, but then I switched to just using fetch to try things out, still didn't work.

In a screen there is a handler to send a message:

const handleSendPress = async () => {
  await postContact(textInput);
}

And the request function:

export const postContact = async (message: string) => {
  // await axiosInstance.post(`${API_URL}/contact`, {
  //   message,
  // });
  await fetch(`${API_URL}/contact`, {
    method: 'POST',
    body: JSON.stringify({
      message,
    }),
    headers: {
      'Content-Type': 'application/json',
      Accept: 'application/json',
      Authorization: 'Bearer [JWT TOKEN]',
    },
  });
};

where I commented out axios and hardcoded the Authorization header.

This works in Android but fails on iOS where the server complains about there being no Authorization header in the request.

I don't get it, any ideas?

Solution

  • Turns out iOS has some reserved HTTP headers, and Authorization is one of them, https://developer.apple.com/documentation/foundation/nsurlrequest.

    If you set a value for one of these reserved headers, the system may ignore the value you set, or overwrite it with its own value, or simply not send it.

    The key word there being may, which is why it would usually fail, but in some cases go through.

    There is probably some way to configure this, but I ended up just changing the header I use to X-Authorization.