打开devtools时，jQuery AJAX调用失败

Question

当我打开开发工具来监视API调用时，我们应用程序中的jQuery Ajax调用失败。 得到500内部错误。

如果我关闭开发工具窗口，则可以正常工作。

这是在生产服务器上发生的。 在我的本地服务器上的任何地方，它都可以正常工作。

我尝试通过启动Java Profiler在chrome中记录它正在工作。 一旦我停止，它就无法工作。

当我阅读服务器日志时，它正在尝试验证令牌不匹配的CSRF令牌。 它引发了异常。 但是仍然有一个困惑，为什么只有在打开调试窗口时才会发生此错误。

我的Ajax呼叫代码如下：

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

也许这是一个缓存问题？ 您的200（良好）响应可能只是缓存（您没有在示例代码中设置cache: false选项，默认情况下为true ）。 Chrome DevTools在“网络”标签上有一个复选框“禁用缓存”。 因此，当您打开DevTools时，您的请求将真正发送到服务器（并获得新的/实际/实际的500响应）。

只需添加cache: false即可避免缓存，在解决问题之前，您可能总是会得到500。

PS：将avoidCacheDate数据字段用作缓存无效对象是不正确的，因为仅在“ GET”请求的情况下， data才会传递到查询字符串。 对于其他（如POST或PUT），它将转到请求有效负载。 为此使用cache选项。