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.
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'}}.
The example below shows how to send multiple headers in a fetch() request to the server, including an Authorization header with a Bearer Token.
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:
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"'.
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