How to authenticate via headers and access API

Question

Access to Apis should be done by passing the following data in the request header:

"[{"key":"chave-api-dados","value":"123456789"}]

Please! Where do I add these values for authentication and access the API?

function buscarPorCpf(){

    const cpf = document.getElementById("cpf").value;
    const mesAno = buscaMes();
    const url = "http://www.transparencia.gov.br/api-de-dados/bolsa-familia-disponivel-por-cpf-ou-nis?codigo="+cpf+"&anoMesReferencia="+mesAno+"&anoMesCompetencia="+mesAno+"&pagina=1";

    var ajax = createCORSRequest('GET', url);

    if (!ajax) {
      throw new Error('CORS not supported');
    }
  

    ajax.onreadystatechange = function () {

        if(this.readyState == 4 && this.status == 200){
            console.log(this.responseText);
        if (this.responseText.length < 3) {  
        $('#dados2').hide();   
        $('#novaconsulta').show();
          }
            let resposta = JSON.parse(this.responseText)[0];
            const valor = resposta.valor;
            const nome = resposta.titularBolsaFamilia.nome;
            const cpf = resposta.titularBolsaFamilia.cpfFormatado;
            
            document.getElementById("pcpf").innerHTML = cpf;
            document.getElementById("pessoas").innerHTML = nome;
            document.getElementById("pvalor").innerHTML = valor;



    }


};

    ajax.send();



}


function createCORSRequest(method, url) {
    var xhr = new XMLHttpRequest();

    if ("withCredentials" in xhr) {
      xhr.open(method, url, true);

  
    } else if (typeof XDomainRequest != "undefined") {
      xhr = new XDomainRequest();
      xhr.open(method, url);

  
    } else {
  
      xhr = null;
  
    }
    return xhr;
  }

Answer 1

Give a googlada to find which method of the class XMLHttpRequest adds headers (headers) to the HTTP request that will be made. Headers are pairs of strings: one is the header key or name, the other is the value.

Call this method on the object xhr passing the key and value as arguments.

Edit: I found it for you:

xhr.setRequestHeader("chave-api-dados", "123456789")

Voilà!

Answer 2

In accordance with the documentation, can add headers to http requests by making: XMLHttpRequest.setRequestHeader(header, value).

The method should be used after open and before send.

Already XDomainRequest does not have a similar method.

Accordingly, and considering that the XDomainRequest is practically no longer supported, one could remove the code snippet that refers to it and do ajax.setRequestHeader("chave-api-dados", sua_chave) before your line ajax.onreadystatechange (...).