When I try and set the Authorzation header as below the header doesn't get sent to the server for the request. What's the correct way to set the Authorization header with fetch?

let options = { 
  method: 'GET', 
  headers: new Headers({ 
    Authorization: 'Bearer ...' 
  }) 
};
fetch('/api/somedata', options).then(function(response) { console.log(response); };

Edit

In chrome developer tools on the network tab I get this for the request:

GET /api/somedata HTTP/1.1
Host: someserver.azurewebsites
Connection: keep-alive
User-Agent: Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/53.0.2785.116 Safari/537.36
Accept: */*
Referer: http://localhost:3000/somedata
Accept-Encoding: gzip, deflate, sdch
Accept-Language: en-US,en;q=0.8

Note there's no Authorization header being set.

And the server responds:

HTTP/1.1 401 Unauthorized
Content-Length: 61
Content-Type: application/json; charset=utf-8
Server: Microsoft-IIS/8.0
WWW-Authenticate: Bearer
X-Powered-By: ASP.NET
Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: GET, POST, OPTIONS, PUT, DELETE
Date: Thu, 29 Sep 2016 03:16:15 GMT

When I try and set the Authorzation header as below the header doesn't get sent to the server for the request. What's the correct way to set the Authorization header with fetch?

let options = { 
  method: 'GET', 
  headers: new Headers({ 
    Authorization: 'Bearer ...' 
  }) 
};
fetch('/api/somedata', options).then(function(response) { console.log(response); };

Edit

In chrome developer tools on the network tab I get this for the request:

GET /api/somedata HTTP/1.1
Host: someserver.azurewebsites
Connection: keep-alive
User-Agent: Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/53.0.2785.116 Safari/537.36
Accept: */*
Referer: http://localhost:3000/somedata
Accept-Encoding: gzip, deflate, sdch
Accept-Language: en-US,en;q=0.8

Note there's no Authorization header being set.

And the server responds:

HTTP/1.1 401 Unauthorized
Content-Length: 61
Content-Type: application/json; charset=utf-8
Server: Microsoft-IIS/8.0
WWW-Authenticate: Bearer
X-Powered-By: ASP.NET
Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: GET, POST, OPTIONS, PUT, DELETE
Date: Thu, 29 Sep 2016 03:16:15 GMT

• javascript
• promise
• fetch-api

Share Improve this question Follow edited Mar 15, 2022 at 9:49 VLAZ 29.2k99 gold badges6363 silver badges8484 bronze badges asked Sep 29, 2016 at 2:55 user193427user193427 4311 silver badge44 bronze badges 7

• I can't reproduce your problem; I tested using the same code as you posted and the Authorization header is indeed sent to the server... – Freyja Commented Sep 29, 2016 at 3:01
• The Authorization header does not appear on the list of forbidden header names, so there's no reason why it shouldn't work. Are you sure the requests are sent without the Authorization header? If you're using Chrome or Firefox, you can view request headers by opening the developer console with F12, and finding your fetch request under the "Network" tab. If it's there, there's probably a problem on the server side. – Freyja Commented Sep 29, 2016 at 3:07
• Yes I'm sure its not setting the Authorization header. – user193427 Commented Sep 29, 2016 at 3:21
• is it a CORS request? – Jaromanda X Commented Sep 29, 2016 at 3:30
• Yes, a cors request. The server responds with a duplicate header for Access-Control-Allow-Origin: * when I use soapui, and doesn't work in postman either. So most likely the server. It's confusing though because I don't see why fetch isn't sending the header? – user193427 Commented Sep 29, 2016 at 3:40

 |  Show 2 more ments

1 Answer 1

Sorted by: Reset to default 3

I believe your server needs to include the following response header:

Access-Control-Allow-Headers: Authorization