Why AJAX call is not working only on iOS, everywhere else it works great?

Question

I'm creating some AJAX star rating from scratch using jQuery and PHP and have realised that everywhere it is just working fine but not on iOS. I checked some plugins (jRating) and has the same problem. It sends the data to the server (PHP) but returns Error Undefined on error: handler.

I have tried almost all other platforms and browsers (Linux - chrome, FF, Opera; Windows - IE, Edge; Android - Chrome, Opera) and everythings working as expected. Non of the browser on iOS is working. Good thing to mention is that the server is behind Amazon Cloudfront. But I have let it pass all the Headers from the origin server and I can see correct Access-Control-Allow-Origin headers in the Chrome Developer Console.

I have also searched and tried all the suggestions with caching and relative URLs, JSON datatypes etc. with no luck. I have also tried random parameter added to POST URL - no luck.

Sometimes, let's say every third requests it is able to return right data.

My JS code:

$('.mystars.ajax input').on('click', function(e){
  e.preventDefault();
  var form = $(this).parent();

  $.ajax({
    type: "POST",
    url: 'my/ajax/url',
    context: this,
    cache: false,
    dataType: 'json',
    headers: { "cache-control": "no-cache" },
    async: true,
    crossDomain: true,
    data: form.serialize(),
    xhrFields: {
      withCredentials: true
    },
    success: function(data)
    {
      alert('xhr success');
      // parse show message to user according to server response.
    },
    error: function(jqXhr, textStatus, errorThrown) {
      alert("Rate problem. Error: " + jqXhr.responseText + ", textStatus: " + textStatus + ", errorThrown: " +  errorThrown)
    },
    complete: function(){
      console.log('compete');
    }
  });
});

Here is the part of Server response code:

$myResponse['error'] = false;
$myResponse['message'] = 'Everything is just fine';
if (isset($_SERVER['HTTP_ORIGIN'])) {
  header("Access-Control-Allow-Origin: {$_SERVER['HTTP_ORIGIN']}");
  header('Access-Control-Allow-Credentials: true');
  header('Access-Control-Max-Age: 86400');
  header('Access-Control-Allow-Methods: GET,PUT,POST,DELETE,OPTIONS');
}
header('Content-Type: application/json');
echo json_encode($myResponse);
exit(0);

It should write Success but it alerts Rate problem. Error: udnefined. textStatus: error, errorThrown:

Answer 1

I believe you're testing on your local computer.

When you test on your computer itself, "my/ajax/url" refers to the same domain. So let's say your test website is on http://localhost/mywebsite , AJAX will hit the full absolute URL which is " http://localhost/mywebsite/my/ajax/url "

On your iOS (I believe it's a different device, like iPhone/tablet/laptop/etc), when AJAX try to hit " http://localhost/mywebsite/my/ajax/url ", it's trying to find that URL in the same device (iphone/tablet/laptop/etc), NOT the computer where the website is hosted on.

So:

1. Make sure you're setting the correct URL. Put alert of full absolute URL (like " http://localhost/mywebsite/my/ajax/url ", and not like "my/ajax/url") BEFORE the AJAX.
2. In your PHP, put in first line this: echo "hi from server"; exit; echo "hi from server"; exit; , and in your AJAX success function, put this: alert(data);

Check if you're sending AJAX to correct URL (#1), and receiving from correct server (#2).