CODEWITHSUNDEEP
ajaxjquery
Weston Boone
Weston Boone

Reputation: 345

AJAX post not working with HTTPS

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

Upvotes: 10

Views: 41564

Answers (2)

davidkonrad
davidkonrad

Reputation: 85528

Why not use a proxy to get over the cross-domain issue? It sounds more easy. An simple example is when i want to retrieve the danish administration national geo-data for counties,road names and so on (lucky for me, their data is in json or XML optional)

simplified proxy.php 

<?
header('Content-type: application/json');
$url=$_GET['url'];
$html=file_get_contents($url);
echo $html;
?>

in ajax, get the lat/longs for a county borderline

var url= "proxy.php?url=https://geo.oiorest.dk/"+type+"/"+nr+"/graense.json";           
$.ajax({
  url: url,
  dataType: 'json',
  success:  function (data) {
   ...

});

notice the https - the url could be, real example, https://geo.oiorest.dk/kommuner/0810/graense.json

Upvotes: 0

Marius Danila
Marius Danila

Reputation: 10411

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.

Upvotes: 2

Related Questions