it-swarm.com.de

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

Weiß jemand, wie man einen benutzerdefinierten HTTP-Header mit JavaScript oder jQuery hinzufügt oder erstellt?

307
Txugo

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

Wenn Sie einen benutzerdefinierten Header (oder eine Gruppe von Headern) zu einer einzelnen Anfrage hinzufügen möchten dann fügen Sie einfach die Eigenschaft headers hinzu:

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

Wenn Sie jeder Anforderung einen Standardheader (oder eine Gruppe von Headern) hinzufügen möchten dann 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 Anfrage einen Header (oder eine Gruppe von Headern) hinzufügen möchten, verwenden Sie den beforeSend -Hook 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' } });

Edit (more info): Beachten Sie, dass Sie mit ajaxSetup nur einen Satz von Standard-Headern definieren können und Sie nur einen beforeSend definieren können. Wenn Sie ajaxSetup mehrmals aufrufen, wird nur der letzte Satz von Headern gesendet und nur der letzte Callback vor dem Senden wird ausgeführt.

557
Prestaul

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-Anfrage den benutzerdefinierten Header, sofern dies nicht ausdrücklich durch die Optionen der Anfrage überschrieben wird. Weitere Informationen finden Sie unter ajaxSetuphier

52
Szilard Muzsi

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.

19
James

Vorausgesetzt, Sie haben JQuery ajax, können Sie benutzerdefinierte Header wie - hinzufügen.

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

Sie können dies auch ohne jQuery tun. Überschreiben Sie die send-Methode von XMLHttpRequest und fügen Sie den Header dort 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;
17
Roland T.

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

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

Angenommen, Sie meinen "Wenn Sie Ajax verwenden" und "Ein HTTP Request Header", dann verwenden Sie die Eigenschaft headers in dem Objekt, an das Sie übergeben ajax()

header (hinzugefügt 1.5)

Voreinstellung: {}

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

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

6
Quentin

Die Methode "setRequestHeader" des XMLHttpRequest-Objekts sollte verwendet werden

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

3
4esn0k

Sie können js fetch verwenden

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();
0