如何使 navigator.sendBeacon 使用 get 方法

Question

我想在客户的网站中使用 navigator.sendBeacon。 但是它使用 POST 方法并且请求没有到达服务器，因为请求 url 的域不同。 我尝试了不同的使用 sendBeacon() 的方法，但都是使用 POST 方法。

1. var data = new FormData();
   navigator.sendBeacon(myurl, data);

2. navigator.sendBeacon(myurl, "");

3. navigator.sendBeacon(myurl);

有没有办法使用 sendBeacon() 进行 GET 调用？ 或者有什么方法可以在跨域环境中使用sendBeacon()。

Answer 1

来自W3C 规范，浏览器实现基于该规范：

sendBeacon() 方法不提供自定义请求方法的能力。 需要对此类请求进行非默认设置的应用程序应使用 FETCH API，并将 keep-alive 标志设置为 true。

根据本文档，这里有一个示例，说明如何使用 Fetch API 复制sendBeacon的行为：

fetch(url, {
  method: ..., 
  body: ...,            
  headers: ...,       
  credentials: 'include',
  mode: 'no-cors',
  keep-alive: true,
})

Answer 2

尽管navigator.sendBeacon使用 POST，您仍然可以将数据作为?query=string传递，这将到达 URL 端点。

然后您可以简单地解析服务器上的 URL 并以这种方式提取数据。

当我想保持 DevTools 关闭但仍然在我的本地终端中看到消息时，我使用这种方法来调试生产站点。 这是输出...

navigator.sendBeacon("http://127.0.0.1:8000/?"+string, string);

127.0.0.1 - - [28/Jan/2021 21:26:43] code 501, message Unsupported method ('POST')
127.0.0.1 - - [28/Jan/2021 21:26:43] "POST /?window-hidden HTTP/1.1" 501 -
127.0.0.1 - - [28/Jan/2021 21:27:42] code 501, message Unsupported method ('POST')
127.0.0.1 - - [28/Jan/2021 21:27:42] "POST /?window%20focus HTTP/1.1" 501 -
127.0.0.1 - - [28/Jan/2021 21:27:42] code 501, message Unsupported method ('POST')
127.0.0.1 - - [28/Jan/2021 21:27:42] "POST /?window%20blur HTTP/1.1" 501 -
127.0.0.1 - - [28/Jan/2021 21:27:42] code 501, message Unsupported method ('POST')
127.0.0.1 - - [28/Jan/2021 21:27:42] "POST /?window%20-%20hidden HTTP/1.1" 501 -

Answer 3

我遇到了同样的问题，发现数据在$ HTTP_RAW_POST_DATA中而不是$ _POST中。

不幸的是，$ HTTP_RAW_POST_DATA已被贬值。 目前正在寻找如何解决这个问题。

Answer 4

浏览器如何解释 sendBeacon() 似乎没有完全标准化； 有些默认在 $_GET 上发送，有些在 $_POST 上发送。 他们应该使用第三个参数让开发人员使用 GET 或 POST 会更清楚