为什么AJAX调用不仅仅适用于iOS，其他任何地方都可以运行得很好？

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).