Basic authentication with jQuery AJAX

There are two ways of adding Basic Authentication to jQuery Ajax calls. You can use beforeSend in jQuery callback to add an HTTP header with the authentication details, e.g.:

beforeSend: function (xhr) {
  xhr.setRequestHeader ("Authorization", "Basic XXXXXX");
}

Alternatively you can do it using jQuery ajaxSetup function:

$.ajaxSetup({
  headers: { Authorization: 'Basic XXXXX' },
})

A few links to the mentioned functions

• jQuery.ajaxSetup
• jQuery.ajax

The authentication header is constructed as: username and password values are joined into a string as follows: username:password and then the result string is encoded using Base64 .

Sample Basic Authentication HTTP header with username Aladdin and password open sesame:

Authorization: Basic QWxhZGRpbjpvcGVuIHNlc2FtZQ==