Dane Larsen Dane Larsen - 3 months ago 8
Ajax Question

jQuery ajax won't make HTTPS requests

I'm doing some pretty basic jQuery ajax stuff on my website, and I'm having a boatload of trouble.

Here's the relevant code:

$(document).ready( function() {
$("#getdatabutton").click( function() {
$.ajax({
url: "/jsontest/randomdata",
type: "get",
data: [{name:"ymax", value:$("#randomgraph").height()},
{name:"count", value:$("#countinput").val()},
{name:"t", value:Math.random()}],
success: function(response, textStatus, jqXHR) {
data = JSON.parse(response);
updateGraph(data);
$("#result").html(response);

if(data["error"] == "") {
$("#errorbox").html("None");
}
else {
$("#errorbox").html(data["error"]);
}
},
error: function(jqXHR, textStatus, errorThrown) {
$("#errorbox").html(textStatus + " " + errorThrown);
}
});
});
});


The page is loaded over HTTPS, but the XMLHttpRequests appear to go out over HTTP.

I've attempted even changing the url to the absolute url (https://larsendt.com/jsontest/randomdata), and it still sends the request to the HTTP version of my site.

Naturally, since the request is going to a different protocol, the ajax call fails (cross-domain and all that).

As reported by Chrome:

The page at https://larsendt.com/jsontest/ displayed insecure content from http://larsendt.com/jsontest/randomdata/?ymax=500&count=32&t=0.08111811126582325.


The only other relevant information I can think of is that I'm having nginx do a 301 redirect from http://larsendt.com to https://larsendt.com, but I don't see how that would break anything (I believe it's fairly standard practice).

If you want a live demo, the broken version is still up at https://larsendt.com/jsontest.

Anyway, thanks in advance.

Answer

Try fixing the URL so your server doesn't have to redirect

url: "/jsontest/randomdata/" // there was a missing trailing /

// i.e.  https://larsendt.com/jsontest/randomdata?ymax=500&count=32&t=0.9604179110508643
// was going to https://larsendt.com/jsontest/randomdata/?ymax=500&count=32&t=0.9604179110508643