jQuery ajax won't make HTTPS requests

Question

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.

Do you mind changing the title of your post so that people with this query don't land on this page.. — brayne, Jan 14 '14 at 06:36

Popnoodles · Accepted Answer · 2014-11-24T11:03:09.197

14

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

edited Nov 24 '14 at 11:03

answered Nov 25 '12 at 23:49

Popnoodles

28,090
2
45
53

Good point, Nood. This can probably also be fixed in the server. IIRC, in Apache (and maybe others) there are several different approaches to handling a missing trailing slash. I'm no expert but did read up on it once (about 10 years ago!). – Beetroot-Beetroot Nov 26 '12 at 00:00
Hi! I get the same issue, but I trying to do tomcat authentication, so I had to `POST` to `j_security_check` who is redirecting... I had nothing to fix in url... any other idea? – Patrick Ferreira May 20 '15 at 08:17
@PatrickFerreira "I had nothing to fix in url." Then it's not the same issue. Post a question. – Popnoodles May 21 '15 at 15:33
I just can't believe in this. Thank you very much! – Jan 08 '18 at 10:32

score 1 · Answer 2 · answered Aug 24 '16 at 00:30

1

301 Permanent Redirect may be happening. To check run Fiddler and watch the Result column. Usually 200 codes, but I spotted a 301 code.

The https jquery ajax call was redirecting to http, causing the Mixed Content error.

answered Aug 24 '16 at 00:30

SushiGuy

1,573
17
20

jQuery ajax won't make HTTPS requests

2 Answers2

Linked