user193427 user193427 - 1 year ago 168
Javascript Question

Authorization header not being sent when using fetch

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); };


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

GET /api/somedata HTTP/1.1
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

Answer Source

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

Access-Control-Allow-Headers: Authorization
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download