I have a browser-based client that makes AJAX calls to a PHP/Apache back-end. When a button is clicked, the client loops through a list of "providers" and sends an Ajax request to each of them with exactly the same payload.
Randomly some of the requests in the loop are arriving at the server side with a blank POST body. What is really strange about this is the fact that other requests in the same loop are arriving properly populated. Sometimes we are seeing all of the items in the loop arriving with a blank body, sometimes some in the loop. It is really strange!
Environment details:
Client = JQuery 3.3.1, JQueryUI 1.12.1, Bootstrap 3.3.7, JQuery validate 1.19.0
Server = Apache 2.4, PHP 7.1
We cannot actually reproduce the problem in a development environment, but logging in production is clearly showing that this is happening regularly on a daily basis (maybe 5% of requests). We have deployed monitoring on the client browsers to trap any errors and there is nothing in terms of exceptions or anything that looks like it could be related.
The sample below shows what we are doing on the client side.
1) bind a click event to
2) when clicked, populate a request object
3) loop through the list of "providers", posting request from 2 to PHP server
$(document).ready(function() {
bindEvents();
}
function bindEvents() {
$("#myButton").click(function(event) {
event.preventDefault();
handleClick();
});
}
function handleClick() {
var request = ...;
...
var save=false;
if (....) {
save=true;
}
var providers = ["provider1", "provider2", "provider3", "provider4", "provider5", "provider6"];
var ndx;
for (ndx=0; ndx<providers.length; ++ndx) {
doRequestSend("action/"+(save?"save":"verify"), request, providers[ndx]);
}
}
function doRequestSend(action, request, provider) {
request['apiKey']=getAPIKey();
var url=baseURL+"/api/"+provider+"/"+action;
$.ajax({
type: "POST",
url: url,
data: JSON.stringify(request),
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function(data){
...
},
failure: function(errMsg) {
...
},
error : function(jqXHR, textStatus, errorThrown) {
...
}
});
}
Obviously, it is difficult to figure out the issue when I cannot reproduce. However, am hoping the someone might spot a problem with the approach that could be resulting in the issue.
Alternatively, open to any random/crazy ideas that could explain HOW this could possibly be happening! Some requests in the loop arrive fine, others arrive blank!
Notes: - Although the loop POST to a slightly different url with each iteration, on the server side, they all end up at the same entry point and the first thing that is done is a log of the body (this is how we know it is blank!) - The only browsers that (to date) seem to have experienced the issue are Chrome 73 & 74 on Windows. This might not be relevant!
Anyone got any ideas or things to try that might track down the source? Cheers!