Wie kann ich einer Ajax-Anfrage mit js oder jQuery einen benutzerdefinierten HTTP-Header hinzufügen?

Antworten:

583

Es gibt verschiedene Lösungen, je nachdem, was Sie brauchen ...

Wenn Sie einer einzelnen Anforderung einen benutzerdefinierten Header (oder eine Reihe von Headern) hinzufügen möchten, fügen Sie einfach die headersEigenschaft hinzu:

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

Wenn Sie jeder Anforderung einen Standardheader (oder eine Reihe von Headern) hinzufügen möchten, verwenden Sie $.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' } });

Wenn Sie jeder Anforderung einen Header (oder eine Reihe von Headern) hinzufügen möchten, verwenden Sie den beforeSendHook mit $.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' } });

Bearbeiten (weitere Informationen): Beachten Sie, dass ajaxSetupSie mit nur einen Satz von Standardheadern definieren können und nur einen beforeSend. Wenn Sie ajaxSetupmehrmals anrufen , wird nur der letzte Satz von Headern gesendet und nur der letzte Rückruf vor dem Senden wird ausgeführt.

Prestaul
quelle
Was passiert, wenn ich beforeSendbeim Ausführen eines ein neues definiere $.ajax?
Kostas
3
Sie können nur einen beforeSendRückruf definieren . Wenn Sie $.ajaxSetup({ beforeSend: func... })zweimal anrufen, wird nur der zweite Rückruf ausgelöst.
Prestaul
1
Meine Antwort wurde aktualisiert, um weitere Details zu hinzuzufügen ajaxSetup.
Prestaul
2
Sieht so aus, als würde es nicht mit CORS Request (jedem Browser) funktionieren. Gibt es eine Lösung?
Svassr
1
@ Si8, das sieht für mich nach einem domänenübergreifenden Problem aus. Sie können keine Anfrage von einer Domain an eine andere stellen. Schauen Sie sich CORS an und sehen Sie, ob das hilft.
Prestaul
54

Wenn Sie den benutzerdefinierten Header für jede zukünftige Anforderung senden möchten, können Sie Folgendes verwenden:

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

Auf diese Weise enthält jede zukünftige Ajax-Anforderung den benutzerdefinierten Header, sofern dies nicht ausdrücklich durch die Optionen der Anforderung überschrieben wird. Weitere Informationen finden Sie ajaxSetup hier

Szilard Muzsi
quelle
1
Wo ich das wirklich erreichen will, scheint das nicht wirklich zu funktionieren.
Reise
1
Nun, Sie sollten sicherstellen, dass das ajaxSetup vor dem eigentlichen ajax-Aufruf aufgerufen wird. Ich kenne keinen anderen Grund, warum dies nicht funktionieren würde :)
Szilard Muzsi
20

Angenommen, JQuery Ajax, können Sie benutzerdefinierte Header wie - hinzufügen.

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

Hier ist ein Beispiel mit 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++;
}; 

Ich hoffe, das hilft.

Wenn Sie Ihr Objekt erstellen, können Sie mit der Funktion setRequestHeader einen Namen und einen Wert zuweisen, bevor Sie die Anforderung senden.

James
quelle
2
Obwohl dies 2011 möglicherweise richtig war, ist es im Allgemeinen eine gute Idee, das Rad nicht neu zu erfinden und stattdessen eine AJAX-Bibliothek wie Zepto oder jQuery zu verwenden.
Dan Dascalescu
4
Es sei denn, Sie versuchen, einem vorhandenen XHR2-Aufruf einen Header hinzuzufügen und möchten nicht alles neu schreiben, um jQuery nur dafür zu verwenden. Zu diesem Zeitpunkt hat @gryzzly die einzig gangbare Antwort.
Roryhewitt
@AliGajani Das Problem ist, dass bestimmte Anwendungen oder Bibliotheken (wie THREE.js) keine $.ajax*Funktionen b / c verwenden, die nicht von jQuery abhängen, und stattdessen XHR verwenden, sodass dies in diesen Fällen die einzig gültige Option ist.
Coburn
1
@AliGajani Zusätzlich ist es nicht nur die Netzwerkladezeit, sondern auch die Analysezeit der Bibliothek. Plus, wenn Sie mit nicht aufpassen welche Abhängigkeiten Sie hinzufügen möchten , können Sie schnell ein Projekt mit zu vielen Abhängigkeiten erhalten
Oztaco - wieder einzusetzen Monica C.
19

Sie können dies auch ohne jQuery tun. Überschreiben Sie die Sendemethode von XMLHttpRequest und fügen Sie dort den Header hinzu:

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.
quelle
12

Sie sollten die Verwendung von $.ajaxSetup()wie in den Dokumenten beschrieben vermeiden . Verwenden Sie stattdessen Folgendes:

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

Angenommen, Sie meinen "Bei Verwendung von Ajax" und "Ein HTTP- Anforderungsheader ", dann verwenden Sie die headersEigenschaft in dem Objekt, an das Sie übergebenajax()

Header (hinzugefügt 1.5)

Standard: {}

Eine Karte mit zusätzlichen Header-Schlüssel / Wert-Paaren, die zusammen mit der Anforderung gesendet werden sollen. Diese Einstellung wird festgelegt, bevor die Funktion beforeSend aufgerufen wird. Daher können alle Werte in der Header-Einstellung in der beforeSend-Funktion überschrieben werden.

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

QUentin
quelle
1

Sie können js fetch verwenden

Kamil Kiełczewski
quelle