En-têtes personnalisés dans les requêtes AJAX POST avec jQuery

Dans les requêtes AJAX POST initiées avec jQuery, il est possible d'inclure des en-têtes personnalisés. Cependant, le mécanisme d'ajout d'en-têtes diffère de l'approche classique.

Lorsque vous spécifiez des en-têtes comme indiqué dans l'exemple :

$.ajax({
    type: 'POST',
    url: url,
    headers: {
        "My-First-Header":"first value",
        "My-Second-Header":"second value"
    }
}).done(function(data) {
    alert(data);
});

Naturellement, vous vous attendez à ce que les en-têtes soient envoyés comme :

My-First-Header: first value
My-Second-Header: second value

Cependant, les mesures de sécurité du navigateur empêchent d'envoyer les valeurs d'en-tête personnalisées directement dans la requête initiale. Au lieu de cela, ils sont placés dans l’en-tête Access-Control-Request-Headers. Il s'agit d'un mécanisme de sécurité connu sous le nom de demande de contrôle en amont.

Pour permettre à la demande suivante d'inclure les valeurs d'en-tête réelles, le serveur doit configurer les en-têtes CORS (Cross-Origin Resource Sharing) nécessaires.

Une solution à ce problème consiste à envoyer les en-têtes d'une manière différente, comme indiqué dans l'exemple de code donné :

$.ajax({
  type: "POST",
  beforeSend: function(request) {
    request.setRequestHeader("Authority", authorizationToken);
  },
  url: "entities",
  data: "json="   escape(JSON.stringify(createRequestObject)),
  processData: false,
  success: function(msg) {
    $("#results").append("The result ="   StringifyPretty(msg));
  }
});

Cette approche définit en fait les valeurs d'en-tête de requête directement, en contournant le placement Access-Control-Request-Headers. Il fournit un moyen d'envoyer des en-têtes personnalisés avec la requête initiale sans nécessiter de configuration du serveur.