Basic Authorization fails for special characters with JQuery on mobile-web-kit

We are using Basic Authorization for our REST-api at RemoteX and it’s no surprise that we have a lot of special characters in our usernames (åäö and spaces). What’s interesting is that using JQuery.ajax() with just username and password will fail for these special characters.

Encoding the username and password options to the .ajax() call will make it work on Android but still will not work on iOS.

After some research started using the method outlined here: http://blog.rassemblr.com/2011/05/jquery-ajax-and-rest-http-basic-authentication-done-deal/

Where they set the Request header before sending the request to the server. What we noticed is that doing this will work only if you also clear the username and password options to .ajax()

so for us it became something like:

options.beforeSend = function(xhr) {
	xhr.setRequestHeader("Authorization", "Basic " + options.base64);
};
var base64 = Base64.encode(options.username + ":" + options.password);
options.base64 = base64;
options.username = "";
options.password = "";

Also we used the Base64 encoder found here: http://www.webtoolkit.info/javascript-base64.html

The crypto-js base64 encoding didn’t work for us for some reason.