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

Basic Authentication HTTP Header

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

Example Basic Authentication HTTP header:

Authorization: Basic QWxhZGRpbjpvcGVuIHNlc2FtZQ==