Q: Jquery .ajax fails when basic auth username has @ symbol (ios / cordova) I have a phonegap app w/ jQuery 1.9.1
Worked great as long as the username doesn't have '@' symbol in it (like in email addresses).
It only fails on iOS.
I suspect it's probably not urlencoding the @ sign or something.


*

*iPhone, it never hits any callbacks (done, fail or always), Wireshark shows request doesn't get to the server.

*Chrome Desktop: works fine.

*Android, works fine.
 $.ajax({
        url: "https://" + this.hostname + "/alertusmw/services/rest/" + endPoint,
        type: method,
        dataType: 'json',
        contentType: 'application/com.alertus-v1.0+json',
        cache:false,
        username: this.username,
        password: this.password,
        beforeSend: function (xhr) {
            xhr.setRequestHeader("Authorization",
                "Basic " + $.base64.encode(this.username + ":" + this.password));
        },
        data: options.data
    }).done(function(response) {
        console.log("DONE: " + method + ' completed: ');
        console.log(response);
        options.success( response );
    })
    .fail(function(jqXHR, textStatus, errorThrown) {
        console.log("FAIL: " + method + " FAILED: " + textStatus + "\n" + "ERROR THROWN: " + errorThrown);
        console.log("jqXHR thing: ", jqXHR);
        options.error(jqXHR,textStatus,errorThrown);
    })
    .always(function(jqXHR, textStatus, errorThrown) {
        console.log("In the always", jqXHR, textStatus, errorThrown);
    });



*

*Verified the base64 header is identical on iphone and chrome desktop.

*It's not an ssl cert issue.

*It's not a cors issue

*It's not an invalid user/pass



Again works perfectly if username doesn't have an '@'
The reason I suspect it's something with url encoding is if it was posting it as:
https://user@domain:password@blah.domain.com, the browser wouldn't probably include the domain:password part as the host (since the first @ is what separates user:pass from the domain... 
Here's what clued me in to this:

^-- I thought the entire point of base64 encoding was exactly to avoid special characters causing issues... so I thought that maybe this was chrome being helpful... 
Related SO Posts:
- Basic Authentication fails in cordova ios (no answers, slightly different)

A: I would bet the problem is not using a contentType : "application/x-www-form-urlencoded".
Anyway, you should definitely debug your Webview against a real device, to look for xhr errors on the Safari console. If you are not familiar with Safari remote debugging, it's easy:


*

*in your iPhone/iPad, go to Settings -> Safari -> Advanced => Enable Web Inspector.

*connect to MacOSX via cable, and select your app from the "Develop" menu of Safari in your desktop

*Now check any errors regarding your request, or better yet, debug the code and callbacks step by step.


A: Try wrapping encodeURIComponent() before base64 encoding.
beforeSend: function (xhr) {
        xhr.setRequestHeader("Authorization",
            "Basic " + $.base64.encode(encodeURIComponent(this.username + ":" + this.password)));
    },


A: When base64encoded text is UNencoded on the other end, it still looks like (as you said), user@domain:password@blah.domain.com Try having a function like this:
var getAuthToken = function (user, pass) {
    var token = "";
    if (user) {
        token = token + encodeURIComponent(user);
    }
    if (pass) {
        token = token + ":" + encodeURIComponent(pass);
    }
    token = $.base64.encode(token);
    return "Basic " + token;
};

Then just change your code slightly:
xhr.setRequestHeader("Authorization", getAuthToken(this.username, this.password));

