Como posso adicionar um cabeçalho HTTP personalizado à solicitação do ajax com js ou jQuery?

Alguém sabe como adicionar ou criar um cabeçalho HTTP personalizado usando JavaScript ou jQuery?

Existem várias soluções, dependendo do que você precisa ...

Se você deseja adicionar um cabeçalho personalizado (ou conjunto de cabeçalhos) a uma solicitação individual , basta adicionar a headerspropriedade:

// Request with custom header
$.ajax({
    url: 'foo/bar',
    headers: { 'x-my-custom-header': 'some value' }
});

Se você deseja adicionar um cabeçalho padrão (ou conjunto de cabeçalhos) a cada solicitação , use $.ajaxSetup():

$.ajaxSetup({
    headers: { 'x-my-custom-header': 'some value' }
});

// Sends your custom header
$.ajax({ url: 'foo/bar' });

// Overwrites the default header with a new header
$.ajax({ url: 'foo/bar', headers: { 'x-some-other-header': 'some value' } });

Se você deseja adicionar um cabeçalho (ou conjunto de cabeçalhos) a cada solicitação , use o beforeSendgancho com $.ajaxSetup():

$.ajaxSetup({
    beforeSend: function(xhr) {
        xhr.setRequestHeader('x-my-custom-header', 'some value');
    }
});

// Sends your custom header
$.ajax({ url: 'foo/bar' });

// Sends both custom headers
$.ajax({ url: 'foo/bar', headers: { 'x-some-other-header': 'some value' } });

Editar (mais informações): Uma coisa a ter em atenção é que ajaxSetupvocê só pode definir um conjunto de cabeçalhos padrão e apenas um beforeSend. Se você ligar ajaxSetupvárias vezes, apenas o último conjunto de cabeçalhos será enviado e apenas o último retorno de chamada antes do envio será executado.

Ou, se você desejar enviar o cabeçalho personalizado para cada solicitação futura, poderá usar o seguinte:

$.ajaxSetup({
    headers: { "CustomHeader": "myValue" }
});

Dessa forma, toda solicitação futura do ajax conterá o cabeçalho personalizado, a menos que seja explicitamente substituído pelas opções da solicitação. Você pode encontrar mais informações ajaxSetup aqui

Supondo que o JQuery ajax, você pode adicionar cabeçalhos personalizados como -

$.ajax({
  url: url,
  beforeSend: function(xhr) {
    xhr.setRequestHeader("custom_header", "value");
  },
  success: function(data) {
  }
});

Aqui está um exemplo usando XHR2:

function xhrToSend(){
    // Attempt to creat the XHR2 object
    var xhr;
    try{
        xhr = new XMLHttpRequest();
    }catch (e){
        try{
            xhr = new XDomainRequest();
        } catch (e){
            try{
                xhr = new ActiveXObject('Msxml2.XMLHTTP');
            }catch (e){
                try{
                    xhr = new ActiveXObject('Microsoft.XMLHTTP');
                }catch (e){
                    statusField('\nYour browser is not' + 
                        ' compatible with XHR2');                           
                }
            }
        }
    }
    xhr.open('POST', 'startStopResume.aspx', true);
    xhr.setRequestHeader("chunk", numberOfBLObsSent + 1);
    xhr.onreadystatechange = function (e) {
        if (xhr.readyState == 4 && xhr.status == 200) {
            receivedChunks++;
        }
    };
    xhr.send(chunk);
    numberOfBLObsSent++;
}; 

Espero que ajude.

Se você criar seu objeto, poderá usar a função setRequestHeader para atribuir um nome e um valor antes de enviar a solicitação.

Você também pode fazer isso sem usar o jQuery. Substitua o método de envio de XMLHttpRequest e adicione o cabeçalho lá:

XMLHttpRequest.prototype.realSend = XMLHttpRequest.prototype.send;
var newSend = function(vData) {
    this.setRequestHeader('x-my-custom-header', 'some value');
    this.realSend(vData);
};
XMLHttpRequest.prototype.send = newSend;

Você deve evitar o uso $.ajaxSetup()conforme descrito nos documentos . Use o seguinte:

$(document).ajaxSend(function(event, jqXHR, ajaxOptions) {
    jqXHR.setRequestHeader('my-custom-header', 'my-value');
});

Supondo que você queira dizer "Ao usar ajax" e "Um cabeçalho de solicitação HTTP ", use a headerspropriedade no objeto para o qual você passaajax()

cabeçalhos (adicionado 1,5)

Padrão: {}

Um mapa de pares de chave / valor de cabeçalho adicionais a serem enviados junto com a solicitação. Essa configuração é definida antes que a função beforeSend seja chamada; portanto, quaisquer valores na configuração de cabeçalhos podem ser substituídos na função beforeSend.

- http://api.jquery.com/jQuery.ajax/

O método "setRequestHeader" do objeto XMLHttpRequest deve ser usado

http://help.dottoro.com/ljhcrlbv.php

Você pode usar js fetch

async function send(url,data) {
  let r= await fetch(url, {
        method: "POST", 
        headers: {
          "My-header": "abc"  
        },
        body: JSON.stringify(data), 
  })
  return await r.json()
}

// Example usage

let url='https://server.test-cors.org/server?enable=true&status=200&methods=POST&headers=my-header';

async function run() 
{
 let jsonObj = await send(url,{ some: 'testdata' });
 console.log(jsonObj[0].request.httpMethod + ' was send - open chrome console > network to see it');
}

run();