How to set authorization header with Axios in React Native

Question

I am building a React Native App with Expo CLI and I am trying to fetch some User Data to my redux store with Axios and redux thunk.

I have saved the jwttoken locally. The problem is, I can't set the Authorization Header. Tried Authorization without, with single and double quotes:

export const fetchAccount = createAsyncThunk(
    'auth/fetchAccount',
    async (payload, { dispatch, rejectWithValue, getState }) => {
        try {
            const response = await axios.get('/manager/user/account', {
                headers: {
                    "Authorization": "Bearer " + jwt
                },
            });
            return response.data
        } catch (err) {
            if (!err.response) {
                throw err
            }
            console.log(err.response)
            return rejectWithValue(err.response.data)
        }
    }
);

it always says 401, "Missing Authorization Header". My backend works correctly, because curl command works:

curl -X GET "http://.......eu.pythonanywhere.com/manager/user/account/" -H "accept: application/json" -H "Authorization: Bearer eyJ0e.......0RmsJoBv9M"

I also used console.log() to log err.response:

Object {
  "config": Object {
    "adapter": [Function xhrAdapter],
    "baseURL": "http://......eu.pythonanywhere.com",
    "data": undefined,
    "headers": Object {
      "Accept": "application/json, text/plain, */*",
      "Authorization": "Bearer eyJ0e.......0RmsJoBv9M",
    },
    "maxContentLength": -1,
    "method": "get",
    "timeout": 0,
    "transformRequest": Array [
      [Function transformRequest],
    ],
    "transformResponse": Array [
      [Function transformResponse],
    ],
    "url": "/manager/user/account",
    "validateStatus": [Function validateStatus],
    "xsrfCookieName": "XSRF-TOKEN",
    "xsrfHeaderName": "X-XSRF-TOKEN",
  },
  "data": Object {
    "msg": "Missing Authorization Header",
  },
  "headers": Object {
    "connection": "keep-alive",
    "content-length": "44",
    "content-type": "application/json",
    "date": "Fri, 31 Jul 2020 16:00:53 GMT",
    "server": "PythonAnywhere",
  },
  "request": XMLHttpRequest {
    "DONE": 4,
    "HEADERS_RECEIVED": 2,
    "LOADING": 3,
    "OPENED": 1,
    "UNSENT": 0,
    "_aborted": false,
    "_cachedResponse": undefined,
    "_hasError": false,
    "_headers": Object {
      "accept": "application/json, text/plain, */*",
      "authorization": "Bearer eyJ0e.......0RmsJoBv9M",
    },
    "_incrementalEvents": false,
    "_lowerCaseResponseHeaders": Object {
      "connection": "keep-alive",
      "content-length": "44",
      "content-type": "application/json",
      "date": "Fri, 31 Jul 2020 16:00:53 GMT",
      "server": "PythonAnywhere",
    },
    "_method": "GET",
    "_requestId": null,
    "_response": "{
  \"msg\": \"Missing Authorization Header\"
}
",
    "_responseType": "",
    "_sent": true,
    "_subscriptions": Array [],
    "_timedOut": false,
    "_trackingName": "unknown",
    "_url": "http://.......eu.pythonanywhere.com/manager/user/account",
    "readyState": 4,
    "responseHeaders": Object {
      "Connection": "keep-alive",
      "Content-Length": "44",
      "Content-Type": "application/json",
      "Date": "Fri, 31 Jul 2020 16:00:53 GMT",
      "Server": "PythonAnywhere",
    },
    "responseURL": "http://........eu.pythonanywhere.com/manager/user/account/",
    "status": 401,
    "timeout": 0,
    "upload": XMLHttpRequestEventTarget {},
    "withCredentials": true,
  },
  "status": 401,
  "statusText": undefined,
}

And I tried to set the header as axios default but got the same response.

Sending a Request without Headers to my backend or any public API works perfectly fine.

Did you read https://stackoverflow.com/questions/40988238/sending-the-bearer-token-with-axios ? — Maximilian Haindl, Jul 31 '20 at 16:28
@MaximilianKromer I'm running into the same issue. Did you ever fix this? — dndr, Jul 24 '22 at 15:32

Dinesh Nadimpalli · Answer 1 · 2020-07-31T17:10:51.890

1

Authorization shouldn't be in quotes. Just remove the quotes and it should work

.........
.........
.........
        axios.defaults.headers.common['Authorization'] = `Bearer ${jwt}`;
        const response = await axios.get('/manager/user/account');

.........
.........
.........

edited Jul 31 '20 at 17:10

answered Jul 31 '20 at 16:25

Dinesh Nadimpalli

1,441
1
13
23

Yes tried without, with single and double quotes. But still the same error – Maximilian Kromer Jul 31 '20 at 16:30
Hey @MaximilianKromer can you try this one? – Dinesh Nadimpalli Jul 31 '20 at 17:11
Unfortunately the same. Also tried to set the token directly, but also the same problem. – Maximilian Kromer Jul 31 '20 at 17:22

score 0 · Answer 2 · answered Jul 31 '20 at 16:23

0

Try this

       const config = {
         headers: {
             Authorization: "Bearer " + jwt
         }
     };

     axios.get('/manager/user/account', {...config});

You dont need a double quote in Authorization

answered Jul 31 '20 at 16:23

rockfight

1,916
2
20
31

Still the same error. Yes tried without, with single and double quotes. – Maximilian Kromer Jul 31 '20 at 16:28

How to set authorization header with Axios in React Native

2 Answers2