Navigator.sendBeacon() 传递头信息

Question

我正在使用 导航 器与服务器通信，但问题是我们需要传递一些标头信息，因为有过滤器可以识别请求来自有效源。

有人可以帮忙吗？

谢谢。

原文由 Vipul Panth 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

有关详细信息，请参阅 Navigator.sendBeacon MDN 文档。

创建一个 blob 以提供标头。这是一个例子：

 window.onunload = function () {
  const body = {
    id,
    email,
  };
  const headers = {
    type: 'application/json',
  };
  const blob = new Blob([JSON.stringify(body)], headers);
  navigator.sendBeacon('url', blob);
});

navigator.sendBeacon 将发送 Content-Type 请求标头设置为 headers.type 中的内容的 POST 请求。根据 W3C ，这似乎是您可以在信标中设置的唯一标头：

sendBeacon 方法不提供自定义请求方法、提供自定义请求标头或更改请求和响应的其他处理属性的能力。需要对此类请求进行非默认设置的应用程序应使用 [FETCH] API，并将 keepalive 标志设置为 true。

通过这份 Chromium 错误报告，我能够观察到它是如何工作的。

原文由 Scotty H 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

如 sendBeacon 的处理模型中所写：

提取对象的字节流（transmittedData）和内容类型（contentType）。

此处描述了 如何执行提取

我收集 到的是提取传输数据的内容类型，并将其设置为 HTTP 请求的 Content-Type。

1. 如果发送了 Blob 对象，则 Content-Type 成为 Blob 的类型。

2）如果发送的是FormData对象，Content-Type变为multipart/form-data

1. 如果发送 URLSearchParams 对象，则 Content-Type 变为 application/x-www-form-urlencoded

4）如果发送的是普通字符串，Content-Type变为text/plain

可以在此处找到 实现不同对象的 Javascript 代码

原文由 Useful Angle 发布，翻译遵循 CC BY-SA 3.0 许可协议