JQuery.ajax not using HTTPS

Question

So, I am calling a web service from jQuery using the .ajax method. The page that is calling the method is an HTTPS/SSL page, yet when the call is made, jQuery keeps making an HTTP request and it is failing because the server is set up to redirect all HTTP traffic to HTTPS...so a 301 error is coming back.

I have inspected my code a million times and tried a million ways to generate the url parameter for the ajax query. (using // for relative and now just appending the protocol https to the beginning of the url. Here is my javascript:

function add_inbound_record(serial_number, pass_fail_value)
{
   pfv = pass_fail_value.toUpperCase();
   url = location.protocol + "//" + location.hostname + "/inbound/record-                 inspection/" + serial_number + "/" + pfv;
   $.ajax({
   url:url,
   cache:false,
   });
}

So, when this code executes, I check the url paramter in firebug and it shows up correctly with https and the URL properly formed. However, when I execute the ajax function I see this in firebug:

301 MOVED PERMANENTLY

192.168.1.9

20 B

192.168.1.9:443

Response Headersview source
Connection  keep-alive
Content-Encoding    gzip
Content-Length  20
Content-Type    text/html; charset=utf-8
Date    Wed, 24 Oct 2012 17:33:34 GMT
Location    http://192.168.1.9/inbound/record-inspection/011234567890123421000000002995/P/?_=1351100020609
Server  nginx/1.1.19
Vary    Accept-Encoding

Request Headersview source
Accept  */*
Accept-Encoding gzip, deflate
Accept-Language en-us,en;q=0.5
Connection  keep-alive
Cookie  djdt=hide; csrftoken=sF9RUxrlS6IKURxOryH2d2yT05gMighn;         sessionid=9682390da4011e445931643c81be9aae
Host    192.168.1.9
Referer https://192.168.1.9/fingerprint/inspect/
User-Agent  Mozilla/5.0 (Macintosh; Intel Mac OS X 10.8; rv:15.0) Gecko/20100101     Firefox/15.0.1
X-Requested-With    XMLHttpRequest

As you can see above from the referrer, the protocol is HTTPS yet the location in the response header is HTTP? I can't for the life of me figure out why the request is going across the wire as HTTP and not HTTPS. The 301 response is accurate considering it is going as HTTP since, again, the webserver is configured to only allow HTTPS access. Any ideas?

The https request is getting redirected to the non-ssl equivalent. Check your webserver config. What does Apache (or IIS, etc) report for the request? — Madbreaks, Oct 24 '12 at 17:51
Is `location.protocol` really `https`? What happens when you manually add the https string? — mekwall, Oct 24 '12 at 17:53
Have you tried testing the endpoint manually using curl or something similar? — Matt Whipple, Oct 24 '12 at 17:55

score 26 · Accepted Answer · edited Nov 12 '22 at 16:52

26

Ok. I messed with this for over 4 hours and as soon as I added a slash to the end of the URL, the issue went away and everything works fine. I have no idea why. The web server/web service does not require a slash to function correctly but for whatever reason, that's what "fixed" it. Thanks for the helpful comments guys.

Example note the double slash

Before: https://somedomain.com//requests/get-requests.html?lang=ar

After (fixed): https://somedomain.com/requests/get-requests.html?lang=ar

UPDATE: Issue came back to me meaning after it became working when i removed the slash!

Then this answer saved my day too https://stackoverflow.com/a/71382206/944593

edited Nov 12 '22 at 16:52

shareef

9,255
13
58
89

answered Oct 24 '12 at 21:57

Rob

612
1
7
11

I had the same bug, and there seems to be no documentation why this happens. Thank you so much, I spent way too long on this. – sparknoob Jan 20 '14 at 11:12
You mean a forward slash like / or a backslash like \ ? – Alien Life Form May 01 '17 at 20:21
I had the same issue. Adding `\` to the url made it work. Without the slash, it would send an http request instead of the desired https. – Mitchell van Zuylen Dec 05 '17 at 19:29
very useful. IDK what's wrong with jquery, took my 1 hour as well. – shyammakwana.me Jun 27 '19 at 12:47
1

I have to remove slash from end of the url. Strange. – shyammakwana.me Jun 27 '19 at 12:48
1

You saved my life! Can someone explain why? Is it a jQuery-Bug? – Michael Käfer Sep 16 '19 at 12:50
Hi . I am also getting same kind of issue but I have query string in the request url. How can I add a slash in the end. Can anyone please let me know – Anand Shukla Oct 29 '19 at 09:13
This worked for me. I added the forward slash "/" at the end of the url. I am working with a Gunicorn web server setup in a kubernetes environment – Dale Kube Aug 27 '20 at 18:19
While this may be helpful for some users, this answer still doesn't point out the root cause of this bug (as I'm currently having it as well). Any pointers on this would be greatly appreciated. – Gabriel I. Jan 18 '22 at 19:09

score 1 · Answer 2 · edited May 16 '13 at 06:13

I was also very upset regarding the same problem. I was sending the ajax request from my ssl page as follows:

$protocol = (!empty($_SERVER['HTTPS']) && $_SERVER['HTTPS'] !== 'off' || 

$_SERVER['SERVER_PORT'] == 443) ? "https://" : "http://";

<script type="text/javascript">
    $.ajax({ 
          url: "<?php echo $protocol.$_SERVER['HTTP_HOST'].$this->url(array("action"=>"autocomplete", "controller"=>"ajax", "module"=>"default"));?>",
                    data: { term: $("#keyword").val()},
                    dataType: "json",
                    type: "POST",
                    success: function(data){
                        response(data);
                    }
                });

</script>

The problem was that, request header shows that the referer page is an ssl page but the response header shows the location an "http" page as in above Rob's code printscreen.

I came to know that each and every time when you make an ajax request from an ssl page response came to the same page i.e. for ssl page and when you make the ajax request from non-ssl page by the response will came for the same i.e. non-ssl page. This is the default rule for ajax request and response.

I think, definitely there must be a problem from my code side which force to make response from http while sending from https. Exactally, my suspicion was right. Actually there was a default code which force to redirect to response to http page instead of https. I am sharing the previous code:

    class Custom_Customplugins extends Zend_Controller_Plugin_Abstract
    {
        public function preDispatch(Zend_Controller_Request_Abstract $request)
        {
        $action = $request->getActionName();
        $controller = $request->getControllerName();
        $module = $request->getModuleName();

        $protocol = (!empty($_SERVER['HTTPS']) && $_SERVER['HTTPS'] !== 'off' || $_SERVER['SERVER_PORT'] == 443) ? "https://" : "http://";
        $host = $_SERVER['HTTP_HOST'];
        if($host != "www.xyz.com")
        {
            if($protocol == "http://")
            {

            }
        }
        else
        {
            $r = new Zend_Controller_Action_Helper_Redirector();
            $u = new Zend_Controller_Action_Helper_Url();
            if(
            ($action == "index" && $controller == "index" && $module == "default") 
            || ($action == "login" && $controller == "index" && $module == "default")
            || ($action == "businessownerregistration" && $controller == "index" && $module == "default")
            || ($action == "customerregistration" && $controller == "index" && $module == "default")
            || ($action == "index" && $controller == "changepwd" && $module == "admin") 
            || ($action == "index" && $controller == "businessowner" && $module == "businessowner") 
            || ($action == "changepwd" && $controller == "serviceprovider" && $module == "businessowner")
            || ($action == "index" && $controller == "customer" && $module == "default")    
              )
            {
            if($protocol == "http://")
            {
                $r->gotoUrl('https://'.$host.$u->url(array("action"=>$action, "controller"=>$controller, "module"=>$module)))->redirectAndExit();
            }
            }
            else
            {
            if($protocol == "https://")
            {
                $r->gotoUrl('http://'.$host.$u->url(array("action"=>$action, "controller"=>$controller, "module"=>$module)))->redirectAndExit();
            }
            }
        }
        }
    }

After correction the code is:

<?php
    class Custom_Customplugins extends Zend_Controller_Plugin_Abstract
    {
        public function preDispatch(Zend_Controller_Request_Abstract $request)
        {
        $action = $request->getActionName();
        $controller = $request->getControllerName();
        $module = $request->getModuleName();

        $protocol = (!empty($_SERVER['HTTPS']) && $_SERVER['HTTPS'] !== 'off' || $_SERVER['SERVER_PORT'] == 443) ? "https://" : "http://";
        $host = $_SERVER['HTTP_HOST'];
        if($host != "www.xyz.com")
        {
            if($protocol == "http://")
            {

            }
        }
        else
        {
            $r = new Zend_Controller_Action_Helper_Redirector();
            $u = new Zend_Controller_Action_Helper_Url();
            if(
            ($action == "index" && $controller == "index" && $module == "default") 
            || ($action == "login" && $controller == "index" && $module == "default")
            || ($action == "businessownerregistration" && $controller == "index" && $module == "default")
            || ($action == "customerregistration" && $controller == "index" && $module == "default")
            || ($action == "index" && $controller == "changepwd" && $module == "admin") 
            || ($action == "index" && $controller == "businessowner" && $module == "businessowner") 
            || ($action == "changepwd" && $controller == "serviceprovider" && $module == "businessowner")
            || ($action == "index" && $controller == "customer" && $module == "default")    
              )
            {
            if($protocol == "http://")
            {
                $r->gotoUrl('https://'.$host.$u->url(array("action"=>$action, "controller"=>$controller, "module"=>$module)))->redirectAndExit();
            }
            }
            else if(
                ($action == "autocomplete" && $controller == "ajax" && $module == "default")
                || ($action == "refreshcaptcha" && $controller == "index" && $module == "default")
               )
            {

            }
            else
            {
            if($protocol == "https://")
            {
                $r->gotoUrl('http://'.$host.$u->url(array("action"=>$action, "controller"=>$controller, "module"=>$module)))->redirectAndExit();
            }
            }
        }
        }
    }

?>

and now, my https page is working fine

score 0 · Answer 3 · answered Jan 18 '22 at 20:07

This is one of the questions that appears when you google this problem, so this may help future readers.

I dunno the root cause, but in my own experience whenever I've faced this problem multiple times, I had an url that had many symbols (or separators) together and it will break whenever it tries to eliminate them. I don't know if it's intentional or a bug.

Examples where this was occurring: (Using XMLHttpRequest() but it's the same principle)

const url_test = `https://foo.bar.faz/api/api_call/${api_parameter}/${api_parameter2}/${params}`;

xhttp.open("GET", url_test, true);
xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");

console_log(url_test); // https://foo.bar.faz/api/api_call/1/2/?get=param&get2=param2&
xhttp.send(); // http://foo.bar.faz/api/api_call/1/2?get=param&get2=param2& <-- request sent to this URL, causing a mixed content error

In order to fix this problem I had to change the Laravel (as it's the framework I'm currently using) route to add /ajax at the end so the symbols &? won't be together when doing the call.

const url_test = `https://foo.bar.faz/api/api_call/${api_parameter}/${api_parameter2}/ajax${params}`;

xhttp.open("GET", url_test, true);
xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");

console_log(url_test); // https://foo.bar.faz/api/api_call/1/2/ajax?get=param&get2=param2&
xhttp.send(); // https://foo.bar.faz/api/api_call/1/2/ajax?get=param&get2=param2 <-- request sent to this URL

Like I said, I don't know if it's a bug or just an undocumented behavior, but this is what worked for me and I hope it will help others having the same problem.

JQuery.ajax not using HTTPS

3 Answers3

Linked