打开 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 选项。