javascript - jQuery Ajax post 请求在 Chrome 上停留在挂起状态

Question

我有一个 jQuery 客户端向 Spring Controller 发出 Ajax post 请求。 在服务器端，没有记录任何错误。 在客户端，请求在很长一段时间内处于待处理状态，几分钟，然后可能会失败，并出现 ERR_SPDY_PROTOCOL_ERROR 或 ERR_CONNECTION_CLOSED。

此问题在 Chrome 上可以重现，但在 Firefox 上则不会。已验证受影响的版本是70.0.3538.77，可能还有其他版本。 此外，问题发生在应用程序的特定部署上，而不是其他地方(开发或生产)。

客户端在该环境上发送 HTTPS 2 请求。开发环境是HTTP 1.1。在服务器上，所有请求都记录为1.1。

由于没有明显的原因，请求开始通过，但这是一个反复出现的问题，并且希望解决它。 由于问题开始发生，我无法重现它并检查问题是否是与服务器的连接太多(超过 6 个)。 我使用三台 DNS 服务器，最后一台是 Google 的 8.8.8.8。

我正在寻找代码修复或提示这是否与服务器设置有关。 我几乎可以肯定它是客户端代码和网络的组合。

问题不在于:

• 防病毒软件 ( Chrome net::ERR_INCOMPLETE_CHUNKED_ENCODING error )

• 与预测服务相关 ( Stalled and pending ajax requests by JQuery in Chrome ) - 不过，有关代理和连接的评论似乎更相关。

• 广告拦截器扩展程序/插件 ( Failed to load resource under Chrome )

我尝试过失败的事情:

• https://www.reddit.com/r/chrome/comments/3ej5ua/err_spdy_protocol_error/

• https://www.itechgyan.com/err_spdy_protocol_error/

• jQuery Ajax requests are getting cancelled without being sent

什么不能回答问题:

• Ajax request over https hangs for 40 seconds in chrome only

在客户端，我尝试清除浏览器数据、刷新套接字和隐私浏览/隐身模式。

有时(很少)绕过该错误的唯一方法是隐身并刷新套接字并从 chrome://net-internals/#events 清空缓存

var formData = new FormData();

formData.append( /* ... */ );

//...

$.ajax({
    type: "POST",
    url: "/somepath/update",
    cache: false,
    data: formData,
    contentType: false,
    processData: false,
    success: function(result) {
        //...
    },
    fail: function(result) {
        //....
    },
    error: function( jqXHR, textStatus, errorThrown ){
        alert(textStatus + ":" + errorThrown);
    }
});

正在处理使用 $.post 的单独请求:

$.post("someotherpath/update", $("#someForm").serialize())
    .done(function (data) {
        //...
     })
     .fail(function (data) {
         //...
     })
     .always(function () {
         //...
     });

服务器端:

@RequestMapping(value="/somepath/update", method = RequestMethod.POST, produces = "application/json;charset=UTF-8")
public @ResponseBody String update(ModelClass model) {
    JSONObject result = new JSONObject();
    //...
    return result.toString();
}

如果相关，有以下过滤器。恐怕我现在无法发布更多内容:

@Configurable
public class Filter1 extends OpenEntityManagerInViewFilter implements Filter{

    public void doFilterInternal(HttpServletRequest httpReq, HttpServletResponse httpResp, FilterChain chain)
        throws ServletException, IOException {
        //...
    }
}


@Configurable
public class Filter2 extends OncePerRequestFilter implements Filter{

    public void doFilterInternal(HttpServletRequest httpReq, HttpServletResponse httpResp, FilterChain chain)
        throws ServletException, IOException {
        //...
    }
}

@Order(/* very small integer */)
public class Filter3 extends OncePerRequestFilter {

}

预期结果是代码应该经历成功回调。 相反，请求会停留在挂起状态几分钟，然后进入错误回调。

Answer 1

$.post 在幕后调用 $.ajax 只是默认了几个选项。

$.post 默认 contentType 为 "application/x-www-form-urlencoded; charset=UTF-8" 这将是与您的序列化表单数据负载一致。

您对 $.ajax 的调用将 contentType 设置为 false ——这可能会导致浏览器向服务器，这可能会导致您遇到的行为差异。

我建议阅读jQuery.ajax()的详细信息以及基于options passed here的各种行为。