Question

当我直接在控制台中调用navigator.sendBeacon时，我立即看到Chrome开发工具网络窗格中的请求已成功完成。

当我使用下面的代码将sendBeacon附加到beforeunload事件然后离开页面时，我看到一行添加到网络窗格但其状态仍然停留在＆＃34;（待定））＆＃34;永远不会发送。

我做错了什么？

  window.addEventListener('beforeunload', function() {
    navigator.sendBeacon(
      'https://www.example.com/sendBeacon-data-collector',
      'Sent by a beacon!');
  }, false);

Answer 1

你说连接停留在“待定”状态并且它永远不会发送。如果它没有发送，则连接根本不会显示在网络窗格中，因此这确认确实确实发送。

至于处于“待定”状态的状态似乎是预期的行为（我仅通过观察凭经验建立的声明）。根据定义，sendBeacon命令不期待一个答案，所以我认为浏览器不显示连接是否正常是正常的，因为它从未从服务器读取可能的回复（我本人的纯猜测）。 p>

无论如何：我在我的网络应用程序中有一个sendBeacon，它将最后的数据保存到数据库中，尽管处于“待定”状态，但该工作正常。因此，如果您的数据没有到达，问题可能就在其他地方。

例如，您需要确保以正确的格式发送数据。为了使其与从HTML表单读取数据的脚本兼容，您不能简单地发送JSON字符串，但是您需要将字符串放入formdata（否则您只能从服务器端的原始发布数据中获取）

示例：

    var fd = new FormData();
    fd.append('data', JSON.stringify(beaconData));
    navigator.sendBeacon("inc/php/saveData.php", fd);

此外，您需要注意sendBeacon始终通过POST参数发送数据。如果您想使用GET，您需要自己在网址中添加数据。

Answer 2

我有同样的问题。我有一个用于收集请求记录的Node / Express服务器。我正在测试时没有数据。

数据可以作为ArrayBuffer，ArrayBufferView，Blob，DOMString，FormData或URLSearchParams对象发送。所以，这不是问题。

问题出在我的服务器上。我当时使用app.get( )而不是app.post( )来检查请求。

所有sendBeacon请求均通过POST发送。

它们将始终在Chrome开发者工具的“网络”标签中显示为待定。他们将始终显示有一个text / html响应为空。

sendBeacon请求将通过POST发送。可以通过“卸载”或“ beforeunload”来触发。

Answer 3

AFAIK，当您触发navigator.sendBeacon()时，您不希望收到服务器的任何响应。您只需在网页完全卸载之前“排队”浏览器发出的请求。

检查请求是否正确排队的一种方法是查看sendBeacon()方法是否返回true或false。如果为true，则说明您的请求已正确排队，并应保证由浏览器运行。如果false，则表示队列未正确排队。有关更多详细信息，请参见此MDN doc。

sendBeacon请求卡在＆＃34;（待定）＆＃34;当附加到卸载事件

3 个答案: