jQuery AJAX Headers

Every time when an AJAX request is initiated a bunch of headers as Accept, Host, User-Agent and few others are send to the server. The browser automatically set their values. In certain situations, you may want to change these values or send additional headers along the AJAX request. You can add standard headers as Authorization, Content-Type as well as non-standard headers as X-Requested-With, X-Csrf-Token or completely custom ones. This blog post describes how to set custom ajax headers by using the jQuery, XMLHttpRequest, and Fetch API.

JQUERY AJAX HEADERS

jQuery made the setting of custom ajax headers extremely easy using the headers property and beforeSend callback function both part of jQuery.ajax() interface.

• headers - a plain javascript object consisted of key/value pairs to sent along with ajax request. Supported since jQuery v1.5

  $.ajax({
      headers: {
          'Authorization': 'Basic ' + btoa('myuser:mypswd'),
          'Order-Num': 123
      },
      url: myUrl
  });

• beforeSend(jqXHR, settings) - a callback function that can be used to modify the jqXHR object, e.g. to set custom headers.

  $.ajax({
      beforeSend: function (jqXHR, settings) {
          jqXHR.setRequestHeader('Authorization', 'Basic ' + btoa('myuser:mypswd'));
      },
      url: myUrl
  });

OVERWRITE AJAX HEADERS

The headers property can be easily overwritten using the jQuery beforeSend function since it has bigger precedence.

$.ajax({
    beforeSend: function (jqXHR, settings) {
        jqXHR.setRequestHeader('Authorization', 'Basic ' + btoa('myuser:MyNewPswd'));
    },
    headers: {
        'Authorization': 'Basic ' + btoa('myuser:mypswd')
    },
    url: myUrl
});

XMLHTTPREQUEST AJAX HEADERS

For those who prefer to use XMLHttpRequest API instead of jQuery, adding a custom ajax headers is possible with the setRequestHeader method.

• setRequestHeader(header, value) - adds custom headers to the HTTP request using the given header name and its value.

  var xhr = new XMLHttpRequest();
  xhr.open('GET', myUrl, true);
  xhr.setRequestHeader('Payment-Id', 'ABC0001');
  xhr.setRequestHeader('Order-Num', 123);
  xhr.setRequestHeader('Order-Num', 456);
  xhr.send(null);

FETCH API AJAX HEADERS

The Headers interface of the Fetch API (successor of the XmlHttpRequest API) allows us to control the headers of an AJAX request.

• append(name, value) - Append a new value for an existing header, or adds the header if it does not already exist.
• set(name, value) - Set a new value for an existing header, or adds the header if it does not already exist.

var myHeaders = new Headers();
myHeaders.set("X-Men", "Wolverine");
myHeaders.set("X-Games", "Aspen");
myHeaders.append("X-Games", "Minneapolis");
fetch(myUrl, {
    headers: myHeaders
}).then(function (response) {});

Multiple headers with the same name are combined and send as one as shown on Figure 1.

CONCLUSION
Adding of custom ajax headers to cross-origin request can be tricky because it will trigger a preflight request.