Jquery - ajax beforeSend basic authentication not working as expected - javascript

I am trying to send a request using ajax to a server which is protected by basic authentication with the following code:
$('document').ready(function(){
$.ajax({
url: "https://somesite.com/somefolder",
type: "POST",
dataType: 'jsonp',
beforeSend: function(xhr) {
xhr.setRequestHeader ("Authorization", "Basic " + btoa('myusername' + ":" + 'mypassword'));
},
success: function(data){
console.log('SUCCESS!');
},
error: function () {
console.log("error");
}
});
});
So I provide the credentials in the beforeSend so my expectation would be that there would be no credential popup from the browser since I already provided the credentials but unfortunately when i run this code I get the popup to enter my credentials. I want to the code to provide these credentials.

Similar to this question, example using headers:
$.ajax({
url: "https://somesite.com/somefolder",
type: "POST",
dataType: 'jsonp',
headers: {"Authorization": "Basic " + btoa('myusername' + ":" + 'mypassword')},
success: function(data){
console.log('SUCCESS!');
},
error: function () {
console.log("error");
}
});

Related

jQuery synchronous call

For rendering a dialog, i have two jQuery ajax calls. One to load the buttons and another to load the body of the dialog. I first call the function that loads the buttons (asychronous ajax call)
$.ajax({
type: "POST",
//async: false,
url: action,
dataType: "json",
contentType: "application/json; charset=utf-8",
success: function (result) {
$('#dialogButtons').html(result);
},
error: function (req, status, error) {
alert(req + " " + error + " " + status);
}
Then i call another similar ajax call to load the body of the dialog in asychronous fashion.
The buttons doesn't always show up. So I made
$.ajaxSetup({ async: false });
$.ajax({
asyc: false,
url: action
})
$.ajaxSetup({ async: true });
as per other stack overflow experts. i am seeing mixed opinions on this approach.
Please help me with the standard way to achieve this.
Do the second AJAX call in the success function of the first.
$.ajax({
type: "POST",
url: action,
dataType: "html",
success: function(result) {
$('#dialogButtons').html(result).hide(); // Will show it after 2nd AJAX call
$.ajax({
type: "POST",
dataType: "html",
url: otheraction,
success: function(result) {
if (result) {
$("#dialog").html(result);
$("#dialogButtons").show();
}
}
});
},
error: function(req, status, error) {
alert(req + " " + error + " " + status);
}
});
You also shouldn't have contentType: "application/json". You're not sending any post data, and $.ajax doesn't send JSON; if you had post data, it would be URL-encoded.

cURL to jQuery AJAX conversion

I've racked my brain over this and I cant seem to figure out the solution so ask humbly for your assistance please. I'm using the restlet client on chrome which uses a cURL command to GET json from a server. I need to convert this curl command over to AJAX, and I'll provide as much code as I'm allowed to. Could you please help me by converting this over to jQuery's Ajax?
cURL Command:
curl -i -L -X GET \
-H "Authorization:Basic base64username:base64password" \
'https://internalserverurl'
Here's what I have for my jQuery AJAX Method:
function make_base_auth(user, password) {
var tok = user + ':' + password;
var hash = Base64.encode(tok);
return "Basic " + hash;
}
function getData() {
$.ajax({
url: "https://internalurl",
beforeSend: function(xhr) {
xhr.setRequestHeader("Authorization", "Basic " + btoa("username:password"));
},
type: 'GET',
dataType: 'json',
contentType: 'application/json',
processData: false,
success: function (data) {
alert(JSON.stringify(data));
console.log(data);
},
error: function (data) {
var strBuilder = [];
for(key in data){
if (data.hasOwnProperty(key)) {
strBuilder.push(key + ":" + data[key] + "<br><br>");
}
}
alert(strBuilder.join(""));
$('#errordiv').html(strBuilder);
}
});
}
Thank you all for your assistance.
I said it in the comments, but you can use the $.ajax function and set your headers in the beforeSend block.
$.ajax({
url: 'https://internalserverurl',
type: 'GET',
dataType: 'json',
success: function() { alert('hello!'); },
error: function() { alert('boo!'); },
beforeSend: setHeader
});
});
function setHeader(xhr) {
xhr.setRequestHeader('Authorization':'Basic base64username:base64password');
}

I can't get Basic Authentication to Pass

I have searched the forums here for a while and am still at a loss. I am doing Basic Authentication with a predefined username and password.
I know that the username and password are correct because I can directly log in.
I have tried passing a "header", "username", "password" and as you see below using "beforeSend".
$.ajax({
type: "GET",
url: "https://vcc-na10.8x8.com/api/stats/groups.xml",
datatype: "xml",
beforeSend: function(xhr) {
xhr.setRequestHeader("Authorization", "Basic " + btoa(username + ":" + password)); },
error: function (){
alert('cant connect');
},
success: function (){
alert('connected');
}
});
I think you need to use the headers parameter to pass authentication. Try this:
$.ajax({
type: "GET",
url: "https://vcc-na10.8x8.com/api/stats/groups.xml",
datatype: "xml",
headers: {
"Authorization": "Basic " + btoa(username + ":" + password)
},
error: function() {
alert('cant connect');
},
success: function() {
alert('connected');
}
});
Try sending the username and password directly in the ajax config.
$.ajax({
type: "GET",
username: username,
password: password,
...

Reliably complete Ajax request on page unload

I have a html/javascript application. When user refreshes the page or close the page i need to make a ajax request and then close the application.
I am using page unload event for this purpose.
I am calling
window.onbeforeunload=beforeFunction;
beforeFunction will make the ajax request. But when i check in fiddler i dont see the ajax request. However if i debug the application and execute each line with f10 then i see the ajax request in fiddler.
thats how my ajax request is formed:
$.ajax({
url: url,
type: "GET",
contentType: "application/json",
async: false,
crossDomain: true,
dataType: 'jsonp',
success: function(json){
alert("success: " + json);
},
error: function(xhr, statusText, err) {
alert("Error:" + xhr.status);
}
});
$(window).on('beforeunload' function() {
$.ajax({
url: url,
type: "GET",
contentType: "application/json",
async: false,
crossDomain: true,
dataType: 'jsonp',
success: function(json){
alert("success: " + json);
},
error: function(xhr, statusText, err) {
alert("Error:" + xhr.status);
}
});
});
Try this....

Jquery jsonp response error - Callback was not called

I'm trying to get some information from a different domain, the domain allows only jsonp call - others get rejected. How can I get the content instead of execution? Because I get an error in response. I don't need to execute it, I just need it in my script. In any format (the response is json but js doesn't understand it).
I can't affect on that domain so it's impossible to change something on that side.
Here's my code:
$.ajax({
url: url + '?callback=?',
crossDomain: true,
type: "POST",
data: {key: key},
contentType: "application/json; charset=utf-8;",
async: false,
dataType: 'jsonp',
jsonp: 'callback',
jsonpCallback: 'jsonpCallback',
error: function(xhr, status, error) {
console.log(status + '; ' + error);
}
});
window.jsonpCallback = function(response) {
console.log('callback success');
};
There are a few issues with your $.ajax call.
$.ajax({
url: url + '?callback=?',
// this is not needed for JSONP. What this does, is force a local
// AJAX call to accessed as if it were cross domain
crossDomain: true,
// JSONP can only be GET
type: "POST",
data: {key: key},
// contentType is for the request body, it is incorrect here
contentType: "application/json; charset=utf-8;",
// This does not work with JSONP, nor should you be using it anyway.
// It will lock up the browser
async: false,
dataType: 'jsonp',
// This changes the parameter that jQuery will add to the URL
jsonp: 'callback',
// This overrides the callback value that jQuery will add to the URL
// useful to help with caching
// or if the URL has a hard-coded callback (you need to set jsonp: false)
jsonpCallback: 'jsonpCallback',
error: function(xhr, status, error) {
console.log(status + '; ' + error);
}
});
You should be calling your url like this:
$.ajax({
url: url,
data: {key: key},
dataType: 'jsonp',
success: function(response) {
console.log('callback success');
},
error: function(xhr, status, error) {
console.log(status + '; ' + error);
}
});
JSONP is not JSON. JSONP is actually just adding a script tag to your <head>. The response needs to be a JavaScript file containing a function call with the JSON data as a parameter.
JSONP is something the server needs to support. If the server doesn't respond correctly, you can't use JSONP.
Please read the docs: http://api.jquery.com/jquery.ajax/
var url = "https://status.github.com/api/status.json?callback=apiStatus";
$.ajax({
url: url,
dataType: 'jsonp',
jsonpCallback: 'apiStatus',
success: function (response) {
console.log('callback success: ', response);
},
error: function (xhr, status, error) {
console.log(status + '; ' + error);
}
});
Try this code.
Also try calling this url directly in ur browser and see what it exactly returns, by this way You can understand better what actually happens :).
The jsonpCallback parameter is used for specifying the name of the function in the JSONP response, not the name of the function in your code. You can likely remove this; jQuery will handle this automatically on your behalf.
Instead, you're looking for the success parameter (to retrieve the response data). For example:
$.ajax({
url: url,
crossDomain: true,
type: "POST",
data: {key: key},
contentType: "application/json; charset=utf-8;",
async: false,
dataType: 'jsonp',
success: function(data){
console.log('callback success');
console.log(data);
}
error: function(xhr, status, error) {
console.log(status + '; ' + error);
}
});
You can also likely remove the other JSONP-releated parameters, which were set to jQuery defaults. See jQuery.ajax for more information.

Categories

Resources