从 window 卸载调用 POST 日志记录请求
Call a POST request for logging from window unload
我一直在努力编写能够在关闭选项卡 window 时可靠地发出 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);
});
我的信标包括自定义 headers,这就是我创建 Blob 的原因。
然而,这个请求似乎并没有发生。由于 window 关闭,这尤其难以调试。那么问题来了,为什么我的信标没有发送?
不知道能不能帮到你。你可以用它来调试。
function logData() {
var newWindow = window.open();
newWindow.document.write("ohai");
}
window.addEventListener("unload", logData, false);
问题是您可以使用 navigator.sendBeacon
设置的唯一 header 是 Content-Type,您可以通过在 Blob 选项中设置 type
来设置它。必须修改服务器路由以适应没有授权 header 的请求(我将其作为 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,它专门解决了在信标中发送 header 的问题。
我一直在努力编写能够在关闭选项卡 window 时可靠地发出 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);
});
我的信标包括自定义 headers,这就是我创建 Blob 的原因。
然而,这个请求似乎并没有发生。由于 window 关闭,这尤其难以调试。那么问题来了,为什么我的信标没有发送?
不知道能不能帮到你。你可以用它来调试。
function logData() {
var newWindow = window.open();
newWindow.document.write("ohai");
}
window.addEventListener("unload", logData, false);
问题是您可以使用 navigator.sendBeacon
设置的唯一 header 是 Content-Type,您可以通过在 Blob 选项中设置 type
来设置它。必须修改服务器路由以适应没有授权 header 的请求(我将其作为 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,它专门解决了在信标中发送 header 的问题。