16

We have a web application working correctly for over a year now on most browsers. Recently we discovered it is not working that well on Safari.

A lot of actions end up with the following error : Failed to load resource: Request timed out. Funny thing is the action is actually performed correctly after that (most of the time).

When looking into the error, it seems to happen when there is an ajax request.

First I tried to change the ajax timeout setting by doing the following :

 $.ajax({
      "type"      : methode,
      "dataType"  : "json",
      "url"       : url,
      "async"     : async,
      "data"      : donneesEnvoyees,
      "timeout"   : 60000
 })

That didn't change anything at all, error is actually showing up after about 10 seconds which is less than the timeout defined.

After reading a bit on the internet, I saw some answer about specifying no-cache so that safari doesn't keep the post parameters in cache. I cannot say I fully understand that, but I still tried the following way : 

$.ajax({
     "type"      : methode,
     "headers"   : { "cache-control": "no-cache" }, <-- added this line
     "dataType"  : "json",
     "url"       : url,
     "async"     : async,
     "data"      : donneesEnvoyees,
     "timeout"   : 60000
 })

As you can guess, I still get the same error.

Do you have any idea of what is happening? Why is this error happening only on Safari and not other browsers? How to fix it?

realUser404
  • 2,111
  • 3
  • 20
  • 38
  • What's value of js variables 'methode', 'url', 'async', 'donneesEnvoyees'? where you are calling ajax? Any where regex involved? – Pranav Singh Jul 08 '15 at 11:18
  • methode is POST or GET. url is the action, async is mostly "false" in all requests, and "donneesEnvoyees" are the post parameters. I am calling Ajax at submit, ant no regex involved no. – realUser404 Jul 08 '15 at 17:02
  • does your ajax have an `error()` function? if so can you include it to the question? – Amin Jafari Jul 10 '15 at 04:00
  • I think I have encountered something like this. Can you give an expected return value from the server? – rrk Jul 10 '15 at 05:13
  • @AminJafari my ajax doesn't have a 'error()' function but a 'fail()' function. If the server sends back some data, the error is displayed in a dialog with the response, but in my case the server doesn't send back any data. – realUser404 Jul 10 '15 at 12:36
  • in your ajax call add this script and give me the result please: `error:function(jqXHR, status, message){alert(jqXHR.responseText);}` – Amin Jafari Jul 10 '15 at 15:14
  • @AminJafari I did : it is returning "undefined" – realUser404 Jul 10 '15 at 17:54

3 Answers3

8

Set the async: true on your ajax settings. It will make the browser hold the connection and just close after receive the response back.

douglasf89
  • 226
  • 1
  • 9
  • That would work with requests that can be asynchronous, but sometimes it is not possible. Anyway, why is safari reacting that way with synchronous requests? – realUser404 Jul 08 '15 at 17:00
  • 2
    From my experience and research, Safari just overrides the timeout provided on ajax settings by his own, using 10 seconds. – douglasf89 Jul 10 '15 at 14:26
  • Awarding you the bounty as your answer helps for some requests (not all). I still do not really understand what is happening and how to fix it for real (with synchronous requests too). – realUser404 Jul 10 '15 at 18:21
3

I got the same issue. Fixed by adding CORS header and response status code as 200

 res.header('Access-Control-Allow-Origin', '*');
 res.status(200);

How & Why

After digging into the error by reading jQuery's source code, I realized the real problem is the XMLHttpRequest in jQuery+Safari is calling onError with a http status code0. So I added CORS headers and give it a 200 status code to solve the problem.

Ryan Wu
  • 5,963
  • 2
  • 36
  • 47
  • 1
    Seems like a good solution! But what is res? .-) WHERE in code does this have to be set? It sounds like this is the "same" issue: https://stackoverflow.com/questions/53732617/how-do-i-get-status-value-from-fail-jquery-issue-with-iphone-ipad-safari ? – bestprogrammerintheworld Dec 11 '18 at 23:20
0

I think your issue will be fixed if you remove dataType : "json" from the code if the return from your ajax page is not a proper JSON string. I've noticed that the $.ajax() doesn't go to the success function if the dataType : "json" is provided and the return data is not of the type JSON.

PS
There are certain things like the AJAX settings keywords type, dataType, url etc are not supposed to be in double quotes. Even though code will work even with the current way, but proper way is what I mentioned.

$.ajax({
      type      : methode,
      dataType  : "json",
      url       : url,
      async     : async,
      data      : donneesEnvoyees,
      timeout   : 60000,
      success   : function(data){
                alert('success');
      }
});

I presume you have added a success function with this ajax call which you can use to use different actions based on the result.

rrk
  • 15,677
  • 4
  • 29
  • 45
  • 1
    The return is always a proper JSON string so I do not think that is the problem. Concerning your presumption, I do not have a 'success()' function but a 'done()' function – realUser404 Jul 10 '15 at 12:39