如何让 navigator.sendBeacon 使用 GET 方法答案

【问题标题】：How to make navigator.sendBeacon use GET method如何让 navigator.sendBeacon 使用 GET 方法
【发布时间】：2016-10-27 21:21:26
【问题描述】：

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

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

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

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

【问题讨论】：

可能是 CORS 问题？

标签： javascript browser cross-domain navigator

【解决方案1】：

来自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,
})

【讨论】：

请注意，如果您的请求不是“简单”请求；更具体地说，如果您的标头对 CORS 不友好，那么出于安全原因，也会在您的实际请求之前发出预检请求。在这种情况下，fetch 调用失败，因为“当前不支持指定 keepalive 的请求的预检请求”。所以只要你的fetch() + keepalive 请求是“简单的”，这个解决方案就可以了。

【解决方案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 -

【讨论】：

【解决方案3】：

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

【讨论】：

什么是 $_GET 和 $_POST？方法是GET和POST