JavaScript - send AJAX call on tab close (DELETE request)

Question

I want to send an AJAX DELETE request through Javascript when the user closes the tab. The flow is the following:

When the user attempts to close the tab, a onbeforeunload event takes place, then if the user confirms to leave the page the onunload event takes place and tries to execute the deleteRequest function, which is a synchronous ajax delete request.

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);
}
}

Unfortunately, it seems that Google Chrome does not support anymore this since when a tab closes it kills all the pending events, and in the console of the browser I can see the following message

DOMException: Failed to execute 'send' on 'XMLHttpRequest': Failed to load 'http://.....': Synchronous XHR in page dismissal. See https://www.chromestatus.com/feature/4664843055398912 for more details. at deletRequest(.......js:411:17) at window.onunload

Please note that I have already seen many topics on this issue before on SO but the solutions did not really help since most of them are out of date since the policy of chrome on this changed quite recently, like this or this.

It seems that most people propose navigator.sendBeacon to achieve this, but in the documentation I saw only ways to make a POST request using this, any thoughts? Thanks in advance.

score 3 · Accepted Answer · answered Jun 13 '20 at 22:23

You're pretty much SOL as far as using sendBeacon out of the box goes, as PUT and DELETE cannot be sent as you observed (only POST). For your XMLHttpRequest, Chrome is very explicit about saying, "hey, we used to send these synchronous XHR requests in beforeunload if you used a no-op loop, but we're not supporting that anymore":

Failed to execute 'send' on 'XMLHttpRequest' [...] Synchronous XHR in page dismissal.

Chrome is intentionally disallowing this behavior. You have no option except to modify the backend, i.e., set up an endpoint that will receive sendBeacon POST request like https://example.com/trigger-delete/ and trigger the DELETE call from the backend, or, if it's not your server, you'll actually have to set up a relay server you control to receive the POST (https://myrelay.com/forward-delete/)and then pass it along as a DELETE.

sendBeacon is the only way you're getting out of this, as far as I can tell.

Hi, thanks for the answer, since it was not my server I created a middleware endpoint on my backend through which I am hitting the `DELETE` request, which works fine, I will just let this question open for 4 days more before I accept it in case anyone else has to propose any other solution without any 3rd party endpoint (although I doubt if any exists), thanks again! — NickAth, Jun 15 '20 at 12:09

JavaScript - send AJAX call on tab close (DELETE request)

1 Answers1