2

当用户关闭选项卡时，DELETE我想通过 Javascript发送 AJAX请求。流程如下：

当用户尝试关闭选项卡时，onbeforeunload会发生一个事件，然后如果用户确认离开页面，则该onunload事件会发生并尝试执行该deleteRequest功能，这是一个synchronous ajax delete请求。

window.onbeforeunload = function(){
        return 'Are you sure you want to leave?';
}; 

window.onunload = function(){
    deleteRequest();
};

function deleteRequest(){
let url = new URL("http://......");
let request = new XMLHttpRequest();
request.onreadystatechange = function () {
    if(request.readyState == 4){
        if(request.status === 200){
            console.log('success');
        }
    }
}
request.open("DELETE", url, false);
try{
    request.send();
}
catch(e){
    console.log(e);
}
}

不幸的是，它似乎Google Chrome 不再支持这一点，因为当一个选项卡关闭它会杀死所有待处理的事件，并且在浏览器的控制台中我可以看到以下消息

DOMException：无法在“XMLHttpRequest”上执行“发送”：无法加载“http://.....”：页面关闭中的同步 XHR。有关详细信息，请参阅https://www.chromestatus.com/feature/4664843055398912 。在 deletRequest(.......js:411:17) 在 window.onunload

请注意，我之前已经在 SO 上看到过很多关于这个问题的主题，但是这些解决方案并没有真正帮助，因为它们中的大多数已经过时了，因为 chrome 的政策最近发生了变化，比如this或this。

似乎大多数人都建议navigator.sendBeacon实现这一点，但在文档中我只看到了使用它提出POST请求的方法，有什么想法吗？提前致谢。

4

1 回答 1

2

sendBeacon就开箱即用而言，您几乎是 SOL，因为您观察到PUT并且DELETE无法发送（仅POST）。对于您的XMLHttpRequest，Chrome 非常明确地说，“嘿，beforeunload如果您使用无操作循环，我们曾经发送这些同步 XHR 请求，但我们不再支持它了”：

无法在“XMLHttpRequest”上执行“发送”[...] 页面关闭中的同步 XHR。

Chrome 故意禁止这种行为。除了修改后端之外，您别无选择，即设置一个端点来接收sendBeacon POST请求https://example.com/trigger-delete/并触发DELETE来自后端的调用，或者，如果它不是您的服务器，您实际上必须设置一个您控制的中继服务器接收 POST (https://myrelay.com/forward-delete/)然后将其作为DELETE.

sendBeacon据我所知，这是您摆脱困境的唯一方法。

于 2020-06-13T22:23:28.863 回答