web-dev-qa-db-fra.com

Comment puis-je ajouter un en-tête HTTP personnalisé à une demande ajax avec js ou jQuery?

Est-ce que quelqu'un sait comment ajouter ou créer un en-tête HTTP personnalisé en utilisant JavaScript ou jQuery?

javascriptjqueryajaxhttp-headershttprequest
307
Txugo

Il y a plusieurs solutions selon ce dont vous avez besoin ...

Si vous voulez ajouter un en-tête personnalisé (ou un ensemble d'en-têtes) à une requête individuelle, ajoutez simplement la propriété headers:

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

Si vous voulez ajouter un en-tête par défaut (ou un ensemble d'en-têtes) à chaque requête, utilisez $.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' } });

Si vous voulez ajouter un en-tête (ou un ensemble d'en-têtes) à chaque requête, utilisez le hook beforeSend avec $.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): Une chose à savoir est qu'avec ajaxSetup vous ne pouvez définir qu'un seul ensemble d'en-têtes par défaut et que vous ne pouvez définir qu'un seul beforeSend. Si vous appelez ajaxSetup plusieurs fois, seul le dernier ensemble d'en-têtes sera envoyé et seul le dernier rappel avant l'envoi sera exécuté.

557
Prestaul

Ou, si vous souhaitez envoyer l'en-tête personnalisé pour chaque demande future, vous pouvez utiliser les éléments suivants:

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

De cette manière, chaque future requête ajax contiendra l’en-tête personnalisé, à moins d’être explicitement remplacée par les options de la requête. Vous pouvez trouver plus d'infos sur ajaxSetupici

52
Szilard Muzsi

Voici un exemple utilisant 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++;
};

J'espère que ça t'as aidé.

Si vous créez votre objet, vous pouvez utiliser la fonction setRequestHeader pour attribuer un nom et une valeur avant d'envoyer la demande.

19
James

En supposant que JQuery ajax, vous pouvez ajouter des en-têtes personnalisés tels que -

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

Vous pouvez également le faire sans utiliser jQuery. Remplacez la méthode d'envoi de XMLHttpRequest et ajoutez l'en-tête à cet endroit:

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.

Vous devez éviter l'utilisation de $.ajaxSetup() comme décrit dans le docs . Utilisez les éléments suivants à la place:

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

En supposant que vous vouliez dire "en utilisant ajax" et "un en-tête HTTP Request ", utilisez la propriété headers dans l'objet que vous transmettez. ajax()

en-têtes (ajouté 1.5)

Valeur par défaut: {}

Un mappage de paires clé/valeur d'en-tête supplémentaires à envoyer avec la demande. Ce paramètre est défini avant l'appel de la fonction beforeSend; par conséquent, toutes les valeurs du paramètre d'en-tête peuvent être écrasées à partir de la fonction beforeSend.

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

6
Quentin

La méthode "setRequestHeader" de l'objet XMLHttpRequest doit être utilisée

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

3
4esn0k

Vous pouvez utiliser 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();
0
Kamil Kiełczewski