Sending Bearer Token Authorization Header with Fetch API

To send a Bearer Token in an Authorization header to a server using the JavaScript Fetch API, you must pass the "Authorization: bearer {token}" HTTP header to the fetch() method using the "headers" parameter. Bearer Token is an encrypted string returned by the server and stored on the user's computer that authenticates the user to access protected resources on the server. You must pass a Bearer Token to the fetch() method for every request you make to a protected resource. In this JavaScript Fetch API Bearer Token example, we send a request with an Authorization header to the ReqBin echo URL using the fetch() method. Click Execute to run the JavaScript Fetch API Bearer Token Authorization Header example online and see the result.
Sending Bearer Token Authorization Header with Fetch API Execute 
fetch('https://reqbin.com/echo/get/json', {
  headers: {Authentication: 'Bearer {token}'}
})
   .then(resp => resp.json())
   .then(json => console.log(JSON.stringify(json)))
Updated: Viewed: 10434 times

What is Fetch API?

In older browsers, there was only one way to send asynchronous HTTP requests (AJAX requests) from JavaScript using the XMLHttpRequest object. Starting in Chrome 42, the Fitch API method was introduced as an alternative to XMLHttpRequest.

The Fetch API introduces a new global fetch() method that allows network requests to be made similar to XMLHttpRequest (XHR), but in a more powerful and flexible way. Fetch API is the better alternative to XMLHttpRequest and can be easily used in conjunction with other technologies such as Service Workers. The main difference between the Fetch API and XMLHttpRequest is that the Fetch API uses Promises, which allows you to have a simpler, cleaner API, avoid a lot of callbacks, and forget about the complex XMLHttpRequest API.

Basic Fetch API Request Example

Below is an example of a basic request to get JSON from a server using the Fetch API. Where the response.json() method reads the data returned by the server and returns a promise that resolves with a JSON object.

Fetch API Request Example
fetch('https://reqbin.com/echo/get/json')
   .then(response => response.json())
   .then( json => console.log(JSON.stringify(json)))
   .catch( error => console.error(error))

For comparison, the same request using the XMLHttpRequest object:

XMLHttpRequest Request Example
let xhr = new XMLHttpRequest();
xhr.open("GET", "https://reqbin.com/echo/get/json");

xhr.onload = function () {
   console.log(this.responseText)
};

xhr.onerror = function (err) {
   console.error(err)
};

xhr.send();

Getting Started with Fetch API

To use the Fetch API, you need to call the fetch() method and provide the target URL as the first parameter. 

fetch('https://reqbin.com/echo/get/json')

This call will return a JavaScript Promise object. To wait for the Promise to complete its task, use the then() method and the catch() method to handle any errors that occur while the Promise is running. 

  .then(response => console.log(response.status))
  .catch( error => console.error(error))

The then() call returns a promise, which resolves to the Response object associated with the requested resource. The Fetch API Response object has a number of useful properties and methods. For example, to check the status of the request, use the response.status property, to see the response headers, check the response.headers property.

How to get JSON from the server using Fetch API?

If you are expecting JSON as a result of your request, call the response.json() method. It reads the data returned by the server and returns a promise that resolves with a JSON object. Accordingly, if you are expecting text, call response.text(). If you are expecting binary data (such as an image), call response.blob() or response.arrayBuffer(). Since the response.json() call also returns a promise, we need to chain on another then() to wait for that promise to complete.

An example of loading JSON from a URL using the Fetch API.

Fetch API Download JSON Example 
fetch('https://reqbin.com/echo/get/json')
   .then(resp => resp.json())
   .then(json => console.log(JSON.stringify(json)))

Sending HTTP Headers with Fetch API Request

You can pass HTTP headers to the fetch() request as the second parameter. For example, to pass the Bearer Token Authorization Header, call fetch() with the {headers: {Authentication: 'Bearer Token'}} parameter.

Fetch API Request with Bearer Token Authorization Header
fetch('https://reqbin.com/echo/get/json', {
  headers: {Authentication: 'Bearer Token'}
})
   .then(resp => resp.json())
   .then(json => console.log(JSON.stringify(json)))

The example below shows how to send multiple headers to the server, including a custom HTTP header.

Fetch API Request with Custom Headers
fetch('https://reqbin.com/echo/get/json', {
  headers: {
    Accept: 'application/json',
    Authentication: 'Bearer Token',
    'X-Custom-Header': 'header value'
  }
})
   .then(resp => resp.json())
   .then(json => console.log(JSON.stringify(json)))

Restrictions on sending HTTP headers with the Fetch API

Due to security restrictions, as well as the fact that some headers are calculated automatically (for example, Content-Length), there is a limitation on the header names that you can send to the server.

Forbidden Fetch API headers names:

  • Content-Length
  • Host
  • Referer
  • Access-Control-Request-Headers
  • Access-Control-Request-Method

Sending POST request with Fetch API

To make a POST request using the Fetch API, we need to pass the: 'method: POST' to the fetch() method as the second parameter (same for HEAD, PUT, PATCH and DELETE request methods):

Fetch API POST Request
fetch('https://reqbin.com/echo/post/json', {
  method: 'POST'
})
   .then(resp => resp.json())
   .then(json => console.log(JSON.stringify(json)))

POST data can be passed to the Fetch API call with the body parameter. We also need to pass the data type using the Content-Type header so that the server can properly recognize and process the transmitted data. Therefore, the correct example of sending JSON to the server looks like this:

Fetch API POST JSON Example
fetch('https://reqbin.com/echo/post/json', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({orderId: 1})  
})
   .then(resp => resp.json())
   .then(json => console.log(JSON.stringify(json)))

Submitting HTML Form Data to the Server Using the Fetch API

To submit HTML form data to the server with Fetch API, you need to create and populate a FormData object and pass it to the fetch() request along with the POST method.

Fetch API POST JSON Example
let data = new FormData();
data.append('orderId', '1');
data.append('customer', 'John Smith');
		
fetch('https://reqbin.com/echo/post/form', {
  method: 'POST',
  body: data
})
   .then(resp => resp.text())
   .then(html => console.log(html))

Note that you do not need to specify the Content-Type header yourself, as the fetch() method will automatically add the Content-Type: multipart/form-data request header since you passed the FormData object as the body parameter.

Sending Authorization Credentials with the Fetch API

By default, a Fetch API request does not contain user credentials such as cookies and HTTP authentication headers such as a bearer token or basic authorization headers. This is not typical for HTTP requests, as usually an HTTP request to the server contains all the cookies from that domain. But AJAX requests to a different origin made by JavaScript Fetch API calls are an exception. This is for security reasons because a request with user authentication data allows JavaScript to act on behalf of the user and obtain private information using those credentials. To allow credentials to be sent to the server, you must explicitly set the 'credentials: "include"' parameter when calling the fetch() method, as shown in the example below. This will tell the browser to send credentials for both: same-origin and cross-origin calls. If you want to send credentials only to the origin domain, use the 'credentials: "same-origin"' parameter. And to prevent the browser from sending credentials altogether, use the 'credentials: "omit"'.

Fetch API Request with Bearer Token Authorization Header
fetch('https://reqbin.com/echo', {
  credentials: 'include'
})
   .then(resp => resp.text())
   .then(html => console.log(html))

If the server correctly processed the request with credentials, then it will send two CORS headers in response: Access-Control-Allow-Credentials: true and Access-Control-Allow-Origin: https://reqbin.com

Server response to Fetch API request with Credentials
HTTP/1.1 200 OK
Access-Control-Allow-Credentials: true
Access-Control-Allow-Origin: https://reqbin.com
Content-Type: text/html
Content-Length: 1000

[page html]

How to get XML from the server using Fetch API?

To get XML from the server using the Fetch API, you can use the response.text() method. The response.text() method reads the data returned by the server and returns a promise that resolves with an XML object. The response.text() method returns a promise, which we need to chain to another then() call to wait for that promise to complete. The following is an example of getting XML from the server using the Fetch API:

Fetch API Download XML Example
fetch('https://reqbin.com/echo/get/xml')
   .then(resp => resp.text())
   .then(xml => console.log(xml))

See also

Javascript Fetch Bearer Token Related API examples and articles