java - working - why does ie cache ajax calls

Why does IE 11 browser randomly have Content-Length=0 for jQuery AJAX POST requests? (1)

I'm working on Spring MVC based webapp.

Following are my environment details :- Java 1.8.0_162 (64 bit), Spring 4.3.1, Apache Tomcat 8.0.49, Waffle-1.8.3 for SSO, jquery-1.11.3 and Google Charts API.

Have put the following JavaScript code in one of the common JS files :- $.ajaxSetup({ cache: false });

The jQuery AJAX POST requests made to the server work flawlessly in Mozilla & Chrome browsers. But when it comes to IE 11 browser, the jQuery AJAX POST requests work without fail only when the window is loaded for the first time. Then fail randomly & once failed, the subsequent requests also fail.

Following are the snapshots of the Network tab of the IE 11 browser:-

  1. SUCCESSFUL ajax POST request :

  2. FAILED ajax POST request :

Both requests have the JSON object in their respective request bodies. But, the Content-Length property value is 416 (the total characters of the stringified JSON object) for the successful request & 0 for the failed one. For the random failed POST request & the subsequent requests, the Content-Length is always 0, but the computed JSON object is always present in the request body. In every request, the JSON object is built dynamically.

UPDATE-1 (26March2018) Following is the Waffle AD authentication configuration defined in the web.xml file :-


Only 1 URL i.e., / (the initial URL that loads the webapp) is configured to invoke SSO authentication.

Following is the JavaScript code that fires AJAX requests :-

function getData() {
    let dashboardFilterParams=new DashboardFilterParams(<passing the arguments to this constructor>);
            url: str_THIS_WA_URL+"/xyz/",
            data: JSON.stringify(dashboardFilterParams),
            dataType: "json",
            contentType: "application/json",
            mimeType: "application/json",
            type: "POST",
                        if(responseData && "success"===responseData.reqResult) {
                            //populating tables & drawing charts using Google Charts JS API if successfully fetched the data
                        } else {
                            //showing error message
            error:function(data,status,er) {
                        showTheMessage("danger","Error getting data");
                        console.log("error: "+JSON.stringify(data)+"\n status: "+status+"\n er:"+er);

IE 11 version details :

Also, I'm using the Google Charts API to render charts on the page. For which the requests are fired to the Google Charts API server. Does this effect in IE browser?

What is the solution to make it work in IE 11 browser?

Answers to Federico klez Culloca's questions in the comments section :

  1. No error in the request (client) side. But the response from the server says The request sent by the client was syntactically incorrect. and the response headers Response HTTP/1.1 400 Bad Request.

  2. There is absolute no difference in the request body contents.

  3. The str_THIS_WA_URL variable points to the same domain as the webapp, i.e., the AJAX requests are within the current domain.

Adding timestamp (on shawn's suggestion in the comments section below) to the URL did not solve the problem.

IE does this as an optimization because it expects the server to reply with an HTTP/401 credential challenge and it would be a waste to transmit the body twice.

In your case since / is secured with NTLM, IE now assumes that / and everything below is part of the secured protection space and thus applies the bodyless POST optimization to everything.

A fix would be to move / to /secured/ and ensure that no unsecured resources are under /secured.

More details here: Challenge-Response Authentication and Zero-Length Posts.