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?
Set the async: true
on your ajax settings. It will make the browser hold the connection and just close after receive the response back.
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With