AJAX post not working with HTTPS

Question

I am having a rather frustrating problem with the jquery post function that probably stems from not understanding how it works correctly.

I have a function that should post some form information to a php script that I wrote and that script then runs curl requests against an API to get around the cross-domain policy of javascript. It seems to work fine as long as it submits to "http" but when I send it to "https" the form never gets submitted.

I ran wireshark on my computer and it showed no traffic towards the destination ip until I made the url use http. I have basic auth on the server so I am passing the user and password through the url, but tested without that there and got the same results.

Here is the not working code:

$j.post("https://<api user>:<password>@<ip>:444/ProxyScript.php", 
         $j("#spoke_ticket").serialize(),
         function(msg) { 
              log_status(msg);
              fade_status();
              $j(':input','#createtheticket')
                   .not(':button, :submit, :reset, :hidden')
                   .val('')
                   .removeAttr('checked')
                   .removeAttr('selected');
               });

Here is the working function:

$j.post("http://<other ip>/ProxyScript.php",  
        $j("#spoke_ticket").serialize(),
        function(msg) { 
              log_status(msg);
              fade_status();
              $j(':input','#createtheticket')
                   .not(':button, :submit, :reset, :hidden')
                   .val('')
                   .removeAttr('checked')
                   .removeAttr('selected');
               });

Any ideas as to why the traffic is not being sent? Let me know if I left out some key information or anything.

Thanks for the help

Answer 1

If you are doing the AJAX post from a http page to a https URL then the Cross-Domain policy kicks in because the protocol is also part of the origin specification, as it is described here. The browser will refuse to make the AJAX call, so that's why you're not seeing any traffic.

A solution is discussed here:

Ajax using https on an http page

So your best bet is the Access-Control-Allow-Origin header which should be supported on most modern browsers now.

So make your server add the following header to the responses:

Access-Control-Allow-Origin: https://www.mysite.com

If for some reason you cannot enforce this, then the only choice left would be JSONP.