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:[email protected]/service easily bypasses that.

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

$.ajax({
 url: 'https://username:[email protected]/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: Check out stackoverflow.com/a/11960692/1730482.
• Ste: @marklap I alredy checked that question, but i still got the 401 error
• marklap: have you tried the solution I linked to? The second block in that solution specifically?
• joozek: Are you sure you use correct credentials? Try debugging in developer console (F12 in chrome) and make sure the header gets sent
• AnKing: I'm having the same issue here. Seems like the solution above doesn't work for me. I'm getting 400 - Bad request

Answer 1

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');
 }
 })