jQuery AJAX calls are failing when devtools are opened

Question

jQuery Ajax calls in our application are failing when I open the dev tools to monitor the API calls. Getting 500 internal error.

If I close the dev tool window, it is working fine.

This is happening on the production server. Where in my local server, it is working fine in both ways.

I tried by starting java profiler to record in chrome it is working. Once I stop it is not working.

When I read the server logs, It is trying to validate the CSRF token where the token is not matching. It is throwing the exception. But still, the confusion that why this error is happening only when debug window is opened.

My Ajax call code is as below:

jQuery.ax=function(url, data, async, type, dataType, successfn, errorfn) {
    async = (async==null || async=="" || typeof(async)=="undefined")? "true" : async;
    type = (type==null || type=="" || typeof(type)=="undefined")? "post" : type;
    dataType = (dataType==null || dataType=="" || typeof(dataType)=="undefined")? "json" : dataType;
    data = (data==null || data=="" || typeof(data)=="undefined")? {"date": new Date().getTime()} : data;
    data.avoidCacheDate = new Date().getTime();
    data.AJAXREQUEST = true;
    $.ajax({
        type: type,
        beforeSend: function (request){
            getToken(request);
        },
        async: async,
        data: data,
        url: url,
        dataType: dataType,
        success: function(d){
            successfn(d);
        },
        error: function(e){
            errorfn(e);
        }
    });
};

Answer 1

maybe it's a caching issue? Your 200 (good) response might be simply cached (you didn't set cache: false option in your sample code, which is true by default). Chrome DevTools has a checkbox "Disable cache" on the "Network" tab. So when you open DevTools your requests are being really sent to the server (and getting a fresh/actual/real 500 response).

Just add cache: false to avoid caching and you will probably always get 500 until fix the problem.

PS: using avoidCacheDate data field as a cache buster isn't correct since data will be passed to the query sting only in case of "GET" request. For other (like POST or PUT) it will go to the request payload. Use cache option for this.