Sending Bearer Token Authorization Header with Fetch API

To send a Bearer Token to the 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: 9962 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 Fetch 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. The main difference between the Fetch API and XMLHttpRequest is that the Fetch API uses Promises, which allows you to have a more straightforward, cleaner API and avoid nested callbacks.

What is the Authorization Header?

HTTP provides a built-in framework for controlling access and authentication to protected resources based on a standard Authorization header. The Authorization request header contains credentials for authenticating the HTTP client on the server using one of the standard authentication mechanisms, such as a Bearer Token or Basic Authentication.

Authorization Header Syntax
Authorization: Basic {base64string}
Authorization: Bearer {token}

What is the Bearer Authorization Token?

The Bearer Token is an encrypted string returned by the server and stored on the user's computer. The Bearer authentication (token authentication) is done by sending security tokens from clients to the server in the Authorization header. The server returns the bearer token in response to user authentication as a string that has no meaning to the client and is not intended to be used by clients. The Bearer Token must be sent to the server with every Fetch API request.

How to send Bearer Token with Fetch API Request?

You can send a Bearer Token to the server with an Authorization HTTP header. HTTP headers can be passed to the fetch() request using the "headers" parameter. To pass the Bearer Token Authorization Header, call fetch() with the {headers: {Authentication: 'Bearer Token'}}.

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

The example below shows how to send multiple headers in a fetch() request to the server, including an Authorization header with a Bearer Token.

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

How to send a POST request with Bearer Token Authorization Header?

The Bearer Token is sent for POST requests in the same way as for GET requests. To make a POST request using the Fetch API, you need to pass the 'method: POST' to the fetch() method (same for HEAD, PUT, PATCH, and DELETE request methods) and the Bearer Token with "headers" parameter:

POST Request with Bearer Token Authorization Header Example
fetch('https://reqbin.com/echo/post/json', {
  method: 'POST',
  headers: {
    Authorization: 'Bearer {token}',
  }
})
   .then(resp => resp.json())
   .then(json => console.log(json))

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 an HTTP request to the server usually 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 enable 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]

See also

Javascript Fetch Bearer Token Related API examples and articles