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

Respostas:

585

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.

Prestaul
fonte
O que acontece se eu definir um novo beforeSendao fazer um $.ajax?
Kostas
3
Você pode definir apenas um beforeSendretorno de chamada. Se você ligar $.ajaxSetup({ beforeSend: func... })duas vezes, o segundo retorno de chamada será o único acionado.
Prestaul
1
Atualizei minha resposta para adicionar mais detalhes sobre ajaxSetup.
Prestaul
2
Parece que não funciona com a solicitação CORS (todos os navegadores). Existe uma solução alternativa?
21815 svassr
1
@ Si8, isso parece um problema de vários domínios para mim. Você não pode fazer uma solicitação de um domínio para outro. Tente pesquisar no CORS e veja se isso ajuda.
Prestaul 28/03
54

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

Szilard Muzsi
fonte
1
Onde eu realmente quero fazer isso, isso não parece realmente funcionar.
Viagem
1
Bem, você deve se certificar de que o ajaxSetup seja chamado antes da chamada ajax real. Eu não sei de qualquer outra razão por que isso não iria funcionar :)
Szilard Muzsi
20

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) {
  }
});
Jayendra
fonte
19

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.

James
fonte
2
Embora isso possa estar correto em 2011, geralmente é uma boa idéia não reinventar a roda e usar uma biblioteca AJAX como Zepto ou jQuery.
Dan Dascalescu
4
A menos que você esteja tentando adicionar um cabeçalho a uma chamada XHR2 existente e não queira começar a reescrever tudo para usar o jQuery apenas para isso ... Nesse ponto, o @gryzzly tem a única resposta viável.
roryhewitt
@AliGajani O problema é que certos aplicativos ou bibliotecas (como THREE.js) não usam $.ajax*funções b / c, não dependem do jQuery e, em vez disso, usam o XHR, portanto, essa é a única opção válida nesses casos.
Coburn
1
@AliGajani Além disso, não é apenas o tempo de carregamento da rede, mas o tempo de análise da biblioteca. Além disso, se você não for cuidadoso com o que você adicionar dependências, você pode obter rapidamente um projeto com muitas dependências
Oztaco - Reintegrar Monica C.
19

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;
Roland T.
fonte
12

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');
});
Stefan D.
fonte
6

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/

Quentin
fonte
1

Você pode usar js fetch

Kamil Kiełczewski
fonte