如何使navigator.sendBeacon使用GET方法

Question

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

1.

var data = new FormData();<br>
navigator.sendBeacon(myurl, data);

1. navigator.sendBeacon(myurl，"")；
2. navigator.sendBeacon(myurl)；

有没有一种使用sendBeacon()打GET电话的方法？或者是否有任何方法在跨域环境中使用sendBeacon()。

Answer 1

在浏览器实现所基于的W3C规范中：

sendBeacon()方法没有提供自定义请求方法的能力。需要此类请求的非默认设置的应用程序应该使用FETCH API，并将其保持活动标志设置为true。

根据本文档，下面是一个关于如何使用Fetch复制sendBeacon行为的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

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