Question

我想在客户的网站上使用navigator.sendBeacon。但它正在使用POST方法，并且请求未到达服务器，因为请求url的域不同。我尝试了使用sendBeacon（）的不同方法，但都使用POST方法。

var data = new FormData（）;
navigator.sendBeacon（myurl，data）;
navigator.sendBeacon（myurl，“”）;
navigator.sendBeacon（myurl）;

有没有办法使用sendBeacon（）进行GET调用？或者有没有办法在跨域环境中使用sendBeacon（）。

Answer 1

尽管 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 2

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

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

Answer 3

似乎浏览器如何解释sendBeacon（）尚无完全标准化。默认情况下，某些发送$ _GET，另一些发送$ _POST。他们应该使用第三个参数让开发人员使用GET或POST

Answer 4

来自W3C specification的浏览器实现所基于的：

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

根据本文档，这是example，说明如何使用Fetch API复制sendBeacon的行为：

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

如何使navigator.sendBeacon使用get方法

4 个答案: