How to Make an AJAX HTTPS GET Request Using jQuery

Question

How can I explicitly make an AJAX HTTPS GET request using jQuery? I am trying to do the following. On an https page, I have a line with the code $.get("/resource"), but I get the following error

XMLHttpRequest cannot load http://www.site.com/resource. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'https://www.site.com' is therefore not allowed access.

Why is the AJAX call trying to access the page using the HTTP protocol if the relative resource is from an https page? If the $.get(url) method does this by default, how do I use jQuery to do an explicit HTTPS GET request? Another person, who had a similar issue, at http://forum.jquery.com/topic/jquery-get-ajax-call-on-http-page-to-https-on-same-domain could not resolve it.

jQuery Version is 1.7.2

Answer 1

Just use RewriteRule in your .htaccess file with the specified protocol, for example:

RewriteCond %{REQUEST_URI} .+[^/]$
RewriteRule ^(.*)$ https://%{SERVER_NAME}%{REQUEST_URI} [R=301,L,QSA]

Answer 2

I fixed the issue. It turned out that due to the way that our Django site was configured, I needed to add a trailing slash to resource in the AJAX request. Without the trailing the slash, Django would then redirect to the URL with the trailing slash using an HTTP request instead of an HTTPS request.

In short, I replaced $.get("/resource") with $.get("/resource/").

Thank you. I really appreciate all of your help.

Answer 3

Try setting the datatype to "jsonp", that's helped me in the past with cross-origin requests.

    $.ajax({
            url: "//www.site.com/resource"
            dataType: "jsonp",
            success: function(data) {
                $(".demo-card").html(data);
            }
    });

Answer 4

If the page you are on is an https page, and the page .get is trying to access is http, then that will not work due to same origin. However, you could just write out the ajax instead of short handing it with .get :)

$.ajax({
    type: "GET", 
    url: "https://someurl"
});

Though I suppose to be fair, that is still a short of true javascript