Using http basic authentication with Ajax call

Question

I need to contact a server to consume a HTTP service.

Trying to reach the service with the browser, using https://example.com/service I get the basic authentication dialog.

Changing the URL to https://username:password@example.com/service easily bypasses that.

Trying to do the same using Ajax always results in 401 Unauthorized though:

$.ajax({
    url: 'https://username:password@example.com/service',
    // rest repeats
    type: "GET",
    async: true,
    success: function(text) { alert('success'); },
    error: function (text) { alert('error') },
    complete: function(text) { alert('complete'); }
});

$.ajax({
    url: 'https://example.com/service',
    username: username,
    password: password,
    // snip repeat
});

$.ajax({
    url: 'https://example.com/service',
    beforeSend: function(xhr) {
        xhr.setRequestHeader("Authorization", "Basic "
            + btoa(username + ":" + password));
    },
    // snip repeat
});

@marklap I alredy checked that question, but i still got the 401 error — Ste, Jan 13 '15 at 08:10
have you tried the solution I linked to? The second block in that solution specifically? — marklap, Jan 13 '15 at 19:35
Are you sure you use correct credentials? Try debugging in developer console (F12 in chrome) and make sure the header gets sent — joozek, Feb 05 '15 at 16:07
I'm having the same issue here. Seems like the solution above doesn't work for me. I'm getting 400 - Bad request — AnKing, Jan 23 '16 at 17:56

score 8 · Answer 1 · answered Jan 27 '16 at 05:49

I struggled with a similar scenario myself.. What did the trick was using jsonp (ugh):

$.ajax({
        url: "https://localhost:8443/v1/accounts",
        type: 'GET',
        dataType: 'jsonp',
        beforeSend: function (xhr) {
            xhr.setRequestHeader('Authorization', 'Basic bHVpZ2lAZ21haWwuY29tOmFiYzEyMzQ1');
        }
    })

Using http basic authentication with Ajax call

1 Answers1