Setting authorization header in Fetch API

Question

I have a Node/Express backend and I'm consuming the API with a React Client. I want to be able to set the authorization header after a user is signed up. This ensures that subsequent requests are sent with the authorization header.

I can see how it's done in Axios here and how to retrieve the authorization header in Fetch here

Is it possible to do this with Fetch API and how?

Thank you in advance.

same issue I'm facing please let me know if you got the solution @Rowland — Yasir Shabbir Choudhary, Aug 16 '20 at 21:04

score 88 · Answer 1 · edited Apr 08 '19 at 14:00

88

var url = "https://yourUrl";
var bearer = 'Bearer ' + bearer_token;
fetch(url, {
        method: 'GET',
        withCredentials: true,
        credentials: 'include',
        headers: {
            'Authorization': bearer,
            'X-FP-API-KEY': 'iphone', //it can be iPhone or your any other attribute
            'Content-Type': 'application/json'
        }
    }).then(responseJson => {
        var items = JSON.parse(responseJson._bodyInit);
    })
    .catch(error => this.setState({
        isLoading: false,
        message: 'Something bad happened ' + error
    }));

edited Apr 08 '19 at 14:00

Shiwani Pandey

98
9

answered Feb 23 '18 at 07:36

Pankaj Bhardwaj

2,081
1
17
37

2

Thanks! It was the "withCredentials"/"credentials" properties that did the trick for me. Without them, my Authorization header was not being sent. – Holy Joe Mar 17 '18 at 18:54
how to get bearer_token when it need to await? – famfamfam Apr 11 '22 at 07:34

score 18 · Accepted Answer · answered Aug 06 '17 at 20:02

As far as I know, there's no way to use default options/headers with fetch. You can use this third party library to get it to work, or set up some default options that you then use with every request:

// defaultOptions.js
const defaultOptions = {
  headers: {
    'Authorization': getTokenFromStore(),
  },
};

export default defaultOptions;

Then use the default options like:

import defaultOptions from './defaultOptions';

// With default options:
fetch('/auth', defaultOptions);

// With additional (non-default) options:
fetch('/auth', { ...defaultOptions, body: JSON.stringify(additionalData) });

Thank you. I use all of that but I think there should be a way to set authorization header with Fetch API. The issue is not making a request with it but setting it after authenticating the user such that in my **network** panel in the dev tool, for instance, I can see it set like other things. — Rowland, Aug 06 '17 at 22:23

score 6 · Answer 3 · answered Aug 06 '17 at 19:52

6

You can pass headers as second parameter of fetch:

fetch(<your url>, {
  headers: {
     authorization: <whatever is needed here>
   }
})

answered Aug 06 '17 at 19:52

Dario

6,152
9
39
50

want to pass all the values such as : Consumer Key: value Consumer Secret: value Access Token: value Access Token Secret: value – Ankita Singh Aug 20 '18 at 05:40
you can add those as keys to `headers` object: `{ authorization: , 'consumer key': , 'consumer secret': , 'Access Token': , 'Access token secret': } ` – Dario Aug 20 '18 at 08:17
This does not work. It throw error: "Response to preflight request doesn't pass access control check: It does not have HTTP ok status" – strix25 Mar 03 '23 at 12:14

bechir majri · Answer 4 · 2022-06-20T20:07:06.783

5

   headers: {
      'Authorization': `Bearer ${localStorage.getItem("token")}`,
      'Accept': 'application/json',
       'Content-Type': 'multipart/form-data;
  },

edited Jun 20 '22 at 20:07

answered Jun 20 '22 at 20:06

bechir majri

51
1
2

score 0 · Answer 5 · edited Jun 19 '19 at 20:38

0

In my case, the problem was that the string I was setting as the Authorization was not yet generated. I had to wrap it in a promise, and suddenly it worked.

let authHeader: string = await SearchAuthService.getAuthHeader();

edited Jun 19 '19 at 20:38

Grzegorz Smulko

2,525
1
29
42

answered Jun 19 '19 at 18:49

user3018736

9
2

Setting authorization header in Fetch API

5 Answers5

Linked