23

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

FearlessFuture
  • 2,250
  • 4
  • 19
  • 25

4 Answers4

51

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.

Mosh Feu
  • 28,354
  • 16
  • 88
  • 135
FearlessFuture
  • 2,250
  • 4
  • 19
  • 25
  • 1
    This was extremely helpful! For anyone else wondering the same thing I did - yes, the trailing slash won't affect any params ie. `/resource/?param=1` will work perfectly fine. One more note: this is easier to diagnose on Chromium, as Chromium shows two requests (one https, the second one https) whereas FireBug only shows a `GET https://...` along with a `location: http://...` header, which might be confusing. – Protagonist Sep 09 '14 at 15:21
  • 1
    This doesn't seem like a generic answer for this issue, but only for django environments with your secret configuration? Or is adding a trailing slash somehow a secret jquery setting for https. – Andrew Jul 15 '16 at 13:22
  • The point of this answer is that if your url is slightly incorrect, your server is likely auto-redirecting... so double check what url you are actually requesting, and where you end up. – Andrew Jul 15 '16 at 13:27
  • This solution worked for me using Flask Blueprints. The redirect to the url with the trailing / was the issue – migreva Sep 28 '16 at 16:12
  • WTF!!! I spent an hour debugging this bs. Why in the world JQuery wants to use HTTP instead of HTTPS if there is a missing trailing / at the end of the URL. C'mon WTF! Here's the correct algorithm: if there is an 'S' in the protocol (i.e. https://) use HTTPS, if there isn't an 'S' in the protocol (i.e. http://) don't use HTTPS. – Gianluca Ghettini Feb 15 '19 at 15:16
8

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

mituw16
  • 5,126
  • 3
  • 23
  • 48
  • Your answer doesn't work if its a different domain! See - http://stackoverflow.com/questions/15375908/ajax-get-request-over-https – avijendr Jan 11 '14 at 00:43
  • @avvijender, well that is a given. OP doesn't say they are trying to make a cross domain request. – mituw16 Jan 11 '14 at 00:44
  • If it's not a cross domain request it works and this question won't be here I guess. I've used 100's of https ajax get/post but from same domain! – avijendr Jan 11 '14 at 00:45
  • 1
    As have I. However, I have on many occasions had the https / http issue. If the request is coming from https, but trying to hit http on the same domain, I've seen this happen. Unfair downvotes... – mituw16 Jan 11 '14 at 00:46
  • @mituw16, that is the issue I am experiencing. I am on an HTTPS page and do a GET request to a resource on the same site, but it tries to access the resource on the same exact site, but with the HTTP protocol. – FearlessFuture Jan 11 '14 at 01:00
  • @FearlessFuture You can either try what I answered with, or pass an absolute url to .get as klugerama suggested. Either *should* work – mituw16 Jan 11 '14 at 01:02
  • @mituw16, I receive the same error both when I set URL to "/resource" and when I set URL to "https://www.site.com/resource". – FearlessFuture Jan 11 '14 at 01:05
  • Try writing out the ajax instead of using .get – mituw16 Jan 11 '14 at 01:07
  • @FearlessFuture - what browser and version are you using? Does this happen for all browsers? If not please try different browsers and let us know. – avijendr Jan 11 '14 at 01:08
  • It happens on IE9: (Don't know exact version) IE10: 10.0.9200.16686 Chrome: 31.0.1650.63 – FearlessFuture Jan 11 '14 at 01:14
  • @mituw16, I used $.ajax() instead of $.get() in my most recent comment to you. – FearlessFuture Jan 11 '14 at 01:17
  • Could you post your code? Would give us a better idea of what's going on – mituw16 Jan 11 '14 at 01:18
  • Unfortunately, I can't post more than the line given in the post, because it is company software. – FearlessFuture Jan 11 '14 at 01:24
4

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);
            }
    });
alphapilgrim
  • 3,761
  • 8
  • 29
  • 58
  • 1
    `dataType` is for figuring out response data format, it has nothing to do with the request. You're looking for `crossDomain`. – jurchiks May 11 '16 at 14:48
-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]
Alex S
  • 719
  • 6
  • 8