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

Quelqu'un sait-il comment ajouter ou créer un en-tête HTTP personnalisé en utilisant JavaScript ou jQuery?

Il existe plusieurs solutions en fonction de vos besoins ...

Si vous souhaitez ajouter un en-tête personnalisé (ou un ensemble d'en-têtes) à une demande individuelle, ajoutez simplement la headerspropriété:

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

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

Modifier (plus d'informations): Une chose à savoir est qu'avec ajaxSetupvous, vous ne pouvez définir qu'un seul ensemble d'en-têtes par défaut et vous ne pouvez en définir qu'un beforeSend. Si vous appelez ajaxSetupplusieurs fois, seul le dernier ensemble d'en-têtes sera envoyé et seul le dernier rappel avant envoi sera exécuté.

Ou, si vous souhaitez envoyer l'en-tête personnalisé pour chaque demande future, vous pouvez utiliser ce qui suit:

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

De cette façon, chaque future demande ajax contiendra l'en-tête personnalisé, à moins qu'elle ne soit explicitement remplacée par les options de la demande. Vous pouvez trouver plus d'informations ajaxSetup ici

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

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

Voici un exemple d'utilisation de 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 cela pourra aider.

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

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

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;

Vous devez éviter l'utilisation de $.ajaxSetup()comme décrit dans la documentation . Utilisez plutôt ce qui suit:

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

En supposant que vous voulez dire «lors de l'utilisation d'ajax» et «un en- tête de requête HTTP », utilisez ensuite la headerspropriété de l'objet vers lequel vous passezajax()

en-têtes (ajouté 1.5)

Défaut: {}

Une carte des 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êtes peuvent être remplacées à partir de la fonction beforeSend.

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

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

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

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