Fetch with setting AJAX Headers in Request

Below steps are done in this example

• Creating an Auth Token ->
• Create a new Ajax Header and keep the token inside this header ->
• Create a new AJAX Request and keep the Header inside this request. ->
• Call the fetch API method and keep the Request object inside this fetch() argument. ->
• Process the response using .then() method or using Async Await
• Optionally use .catch() method with then() method (or) use a "try {} catch (e) {}" block with Async Await. to catch if error comes.

Input for creating base64 token

Username

Password

Submit

---

(Note: This works only in server) Inspect and check in Network -> All -> select <filename> (secret.html) -> Headers -> Request Headers -> Here you can see the property "Authorization: Basic S2FydGhpOkthcnRoaSgp" <<Base64 token>> which you setted up, by geting from user input & password and ket it as Authorization value.

document.getElementById("myForm")
    .addEventListener("submit", loadSecret);

function loadSecret(e){

    e.preventDefault(); //Preventing Default form submission
    
    console.log(e); //has the event object

    let username_val = document.getElementById('username').value;
    let password_val = document.getElementById('password').value;

    //console.log(password_val)


    //create our own Base64 token
    let encodedData = window.btoa(username_val + ':' + password_val)
    //console.log(window.btoa('Karthi'))
    //console.log(encodedData)

    let authToken = `Basic ${encodedData}`;
    console.log(authToken)

    //Setup our Ajax ##############################
    let h = new Headers();
    h.append('Authorization', authToken);

    let url = './protected/secret.html';

    let req = new Request(url, {method: "GET", headers: h});

    fetch(req)
        .then(data => data.text())
        //.then(message => console.log(message))
        .then(message => document.getElementById('demo').innerHTML = message)
        .catch(err => {console.log(err);})

}