Benutzerdefinierte Header in AJAX POST-Anfragen mit jQuery

In AJAX POST-Anfragen, die mit jQuery initiiert wurden, ist es möglich, benutzerdefinierte Header einzuschließen. Der Mechanismus zum Hinzufügen von Headern unterscheidet sich jedoch vom typischen Ansatz.

Wenn Sie Header wie im Beispiel gezeigt angeben:

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

Verständlicherweise würden Sie erwarten, dass die Header wie folgt gesendet werden:

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

Sicherheitsmaßnahmen des Browsers verhindern jedoch, dass die benutzerdefinierten Header-Werte direkt in der ersten Anfrage gesendet werden. Stattdessen werden sie im Header „Access-Control-Request-Headers“ platziert. Dies ist ein Sicherheitsmechanismus, der als Preflight-Anfrage bekannt ist.

Damit die nachfolgende Anfrage die tatsächlichen Header-Werte enthalten kann, muss der Server die erforderlichen CORS-Header (Cross-Origin Resource Sharing) konfigurieren.

Eine Lösung hierfür besteht darin, die Header auf eine andere Art und Weise zu senden, wie im angegebenen Beispielcode gezeigt:

$.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));
  }
});

Dieser Ansatz legt die Anforderungsheaderwerte tatsächlich direkt fest und umgeht die Platzierung der Access-Control-Request-Headers. Es bietet eine Möglichkeit, benutzerdefinierte Header mit der ersten Anfrage zu senden, ohne dass eine Serverkonfiguration erforderlich ist.