ウィンドウアンロードからのログ取得のためのPOSTリクエストを呼び出す

Question

私は、タブウィンドウを閉じるときにPOSTリクエストを確実に行うコードを書くのに苦労しています。 Navigator.sendBeaconはまさに私が必要とするようです（私はこれがGoogle Chromeのためにのみ必要です）。

$(global).bind('unload', function() { 
    let body = { 
    UserEmail: appState.user.email, 
    Job: { 
     Id: appState.jobId 
    }, 
    Timestamp: '/Date(' + new Date().getTime() + ')/', 
    EventOrigin: 'PdfReviewClient', 
    Event: 'JobClosed' 
    }; 
    let headers = { 
    Authorization: `JWT ${authenticationState.token}`, 
    'Content-Type': 'application/json; charset=utf8' 
    }; 
    let blob = new Blob([JSON.stringify(body)], headers); 
    navigator.sendBeacon(configuration.rootApiUrl + 'jobevents', blob); 
}); 

私のビーコンにはカスタムヘッダーが含まれているため、私はBlobを作成しています。

ただし、この要求は発生していないようです。これは、ウィンドウが閉じられてから特にデバッグが難しいです。だから質問は、なぜ私のビーコンは送信されないのですか？

Answer 1

問題は、navigator.sendBeaconで設定できる唯一のヘッダーがContent-Typeであり、そしてあなたがブロブオプションでtypeを設定することであることを設定しました。 Authorizationヘッダーなしで要求に対応するようにサーバールートを変更する必要がありました（代わりにURLパラメーターとして渡しました。これはPOSTリクエストでは奇妙ですが、ビーコンでこれを行う唯一の方法です）。ここではそれが最後に見えた方法は次のとおりです。

$(global).bind('unload', function() { 
    if(appState.jobId == null) return; 

    let headers = { 
    type: 'application/json' 
    }; 

    let jobEventLoggingBody = { 
    UserEmail: appState.user.email, 
    Job: { 
     Id: appState.jobId 
    }, 
    Timestamp: '/Date(' + new Date().getTime() + ')/', 
    EventOrigin: 'PdfReviewClient', 
    Event: 'JobClosed' 
    }; 
    let jobEventLoggingUrl = `${configuration.rootApiUrl}jobevents?jwt=${authenticationState.token}`; 
    let jobEventLoggingBlob = new Blob([JSON.stringify(jobEventLoggingBody)], headers); 
    navigator.sendBeacon(jobEventLoggingUrl, jobEventLoggingBlob); 
}); 

も特にビーコンにヘッダを送信するアドレスthis questionを参照してください。

Answer 2

私はあなたに役立つかどうか分かりません。これを使ってデバッグすることができます。

function logData() { 
    var newWindow = window.open(); 
    newWindow.document.write("ohai"); 
} 

window.addEventListener("unload", logData, false);