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

Improve this question
5
  • See: stackoverflow.com/questions/15375908/… Commented Jan 11, 2014 at 0:37
  • @FearlessFuture - Are you making the GET from the same domain? Commented Jan 11, 2014 at 0:42
  • Also: stackoverflow.com/questions/7311702/… Commented Jan 11, 2014 at 0:44
  • Why not just use an absolute URL? Commented Jan 11, 2014 at 0:46
  • @avijendr, yes it is from the same domain. Commented Jan 11, 2014 at 1:01

4 Answers 4

Reset to default
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.

Improve this answer
Sign up to request clarification or add additional context in comments.

5 Comments

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.
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.
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.
This solution worked for me using Flask Blueprints. The redirect to the url with the trailing / was the issue
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.
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

Improve this answer

13 Comments

Your answer doesn't work if its a different domain! See - stackoverflow.com/questions/15375908/…
@avvijender, well that is a given. OP doesn't say they are trying to make a cross domain request.
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!
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, 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.
|
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); } });
Improve this answer

1 Comment

dataType is for figuring out response data format, it has nothing to do with the request. You're looking for crossDomain.
-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]
Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.