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，您可以通过在Blob选项中设置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

我不知道它是否可以帮到你。您可以使用它来调试。

Array[1]

从窗口卸载调用POST请求进行日志记录

2 个答案: