Ajax request works in mobile Safari console, but not in code

Question

I have the following jQuery code which performs a simple request:

$.ajax({
  type: "POST",
  url: "/wp-admin/admin-ajax.php",
  headers: {
    "pragma": "no-cache",
    "cache-control": "no-cache",
  },
  data: payload,
  function(response) {
    console.log('Got this from the server: ' + response);
  }
});

Now this code seems to work flawlessly when I run it on any desktop browser. However, it fails only on the mobile Safari browser. Funnily enough, if I execute it via the mobile Safari console, it works flawlessly.

After inspecting the network connections, I found that the mobile Safari browser doesn't seem to be correctly setting request headers. Specifically, the following five request headers are visible in other browsers (and also in the console, when I execute it there), but are mysteriously missing when the request comes from the normal button-click on my iPhone:

-H 'Host: abc.com' \
-H 'Accept-Language: en-us' \
-H 'Accept-Encoding: br, gzip, deflate' \
-H 'Content-Length: 187' \
-H 'Connection: keep-alive' \

I tried manually setting these headers in the code, but Safari complains about security issues with "setting unsafe header". For what it's worth, I'm using JQuery 3.4.1.

Could someone please help me figure out how to make this request work on the mobile browser?

Ajax request works in mobile Safari console, but not in code

0 Answers0