Jak mogę dodać niestandardowy nagłówek HTTP do żądania ajax za pomocą js lub jQuery?

Odpowiedzi:

585

Istnieje kilka rozwiązań w zależności od potrzeb ...

Jeśli chcesz dodać niestandardowy nagłówek (lub zestaw nagłówków) do pojedynczego żądania, po prostu dodaj headerswłaściwość:

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

Jeśli chcesz dodać domyślny nagłówek (lub zestaw nagłówków) do każdego żądania, użyj $.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' } });

Jeśli chcesz dodać nagłówek (lub zestaw nagłówków) do każdego żądania, użyj beforeSendhaka z $.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' } });

Edycja (więcej informacji): Należy pamiętać, że dzięki ajaxSetupniemu możesz zdefiniować tylko jeden zestaw domyślnych nagłówków i możesz zdefiniować tylko jeden beforeSend. Jeśli zadzwonisz ajaxSetupwiele razy, zostanie wysłany tylko ostatni zestaw nagłówków i zostanie wykonane tylko ostatnie wywołanie zwrotne przed wysłaniem.

Prestaul
źródło
Co się stanie, jeśli zdefiniuję nowy beforeSendpodczas robienia $.ajax?
Kostas
3
Możesz zdefiniować tylko jedno połączenie beforeSendzwrotne. Jeśli zadzwonisz $.ajaxSetup({ beforeSend: func... })dwa razy, to drugie oddzwanianie będzie jedynym, który uruchomi połączenie.
Prestaul
1
Zaktualizowałem moją odpowiedź, aby dodać więcej szczegółów na temat ajaxSetup.
Prestaul
2
Wygląda na to, że nie działa z Żądaniem CORS (każda przeglądarka). Czy jest w pobliżu praca ?
svassr
1
@ Si8, dla mnie wygląda to na problem między domenami. Nie możesz złożyć wniosku z jednej domeny do drugiej. Spróbuj zajrzeć do CORS i sprawdź, czy to pomoże.
Prestaul
54

Lub, jeśli chcesz wysłać niestandardowy nagłówek dla każdego przyszłego żądania, możesz użyć następujących opcji:

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

W ten sposób każde przyszłe żądanie ajax będzie zawierać niestandardowy nagłówek, chyba że zostanie wyraźnie zastąpione przez opcje żądania. Więcej informacji znajdziesz ajaxSetup tutaj

Szilard Muzsi
źródło
1
Tam, gdzie naprawdę chcę to osiągnąć, wydaje się, że to nie działa.
Wycieczka
1
Cóż, powinieneś upewnić się, że wywoływane jest ajaxSetup przed faktycznym wywołaniem ajax. Nie znam żadnego innego powodu, dla którego to by nie działało :)
Szilard Muzsi 30.01.2013
20

Zakładając, że JQuery ajax, możesz dodać niestandardowe nagłówki, takie jak -

$.ajax({
  url: url,
  beforeSend: function(xhr) {
    xhr.setRequestHeader("custom_header", "value");
  },
  success: function(data) {
  }
});
Jayendra
źródło
19

Oto przykład z użyciem 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++;
}; 

Mam nadzieję, że to pomaga.

Jeśli tworzysz swój obiekt, możesz użyć funkcji setRequestHeader, aby przypisać nazwę i wartość przed wysłaniem żądania.

James
źródło
2
Chociaż może to być poprawne w 2011 r., Ogólnie dobrym pomysłem jest, aby nie wymyślać koła na nowo, a zamiast tego używać biblioteki AJAX, takiej jak Zepto lub jQuery.
Dan Dascalescu,
4
Chyba że próbujesz dodać nagłówek do istniejącego wywołania XHR2 i nie chcesz zaczynać od nowa, aby używać jQuery tylko do tego ... W tym momencie @gryzzly ma jedyną możliwą odpowiedź.
roryhewitt
@AliGajani Problem polega na tym, że niektóre aplikacje lub biblioteki (takie jak THREE.js) nie używają $.ajax*funkcji b / c, nie zależą od jQuery i zamiast tego używają XHR, więc jest to jedyna poprawna opcja w takich przypadkach.
Coburn,
1
@AliGajani Dodatkowo, to nie tylko czas ładowania sieci, ale także czas analizy biblioteki. Ponadto, jeśli nie jesteś ostrożny z
dodanymi
19

Możesz to również zrobić bez użycia jQuery. Zastąp metodę wysyłania XMLHttpRequest i dodaj tam nagłówek:

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.
źródło
12

Powinieneś unikać używania $.ajaxSetup()zgodnie z opisem w dokumentacji . Zamiast tego użyj następujących opcji:

$(document).ajaxSend(function(event, jqXHR, ajaxOptions) {
    jqXHR.setRequestHeader('my-custom-header', 'my-value');
});
Stefan D.
źródło
6

Zakładając, że masz na myśli „Gdy używasz ajax” i „ Nagłówek żądania HTTP ”, użyj headerswłaściwości w przekazanym obiekcieajax()

nagłówki (dodano 1.5)

Domyślna: {}

Mapa dodatkowych par klucz / wartość nagłówka do wysłania wraz z żądaniem. To ustawienie jest ustawiane przed wywołaniem funkcji beforeSend; dlatego wszelkie wartości w ustawieniach nagłówków można nadpisać z poziomu funkcji beforeSend.

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

Quentin
źródło
1

Możesz użyć pobierania js

Kamil Kiełczewski
źródło