Navigator.sendBeacon() 传递头信息

Question

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

有人可以帮忙吗？

谢谢。

Answer 1

@Vipul Panth 提供了有用的信息，但我想提供一些更完整的详细信息。

首先，请注意，并非所有浏览器都支持navigator.sendBeacon 。 在MDN 文档中查看有关此功能以及当前支持的浏览器的更多详细信息。

您确实创建了一个 blob 来提供标题。 下面是一个例子：

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

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

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

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

Answer 2

如sendBeacon的处理模型中所写：

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

此处描述了如何执行提取

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

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

2）如果发送了一个FormData对象，Content-Type就变成了multipart/form-data

3) 如果发送了一个 URLSearchParams 对象，则 Content-Type 变为 application/x-www-form-urlencoded

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

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

Answer 3

如果您使用 Chrome 并尝试设置 content-type 标头，由于安全限制，您可能会遇到一些问题：

Uncaught DOMException: Failed to execute 'sendBeacon' on 'Navigator': sendBeacon() with a Blob whose type is not any of the CORS-safelisted values for the Content-Type request header is disabled temporarily. See http://crbug.com/490015 for details.

请参阅sendBeacon API 由于安全问题而暂时无法工作，有什么解决方法吗？

Answer 4

我想在有人关闭选项卡时调用一个 api，所以我尝试使用navigator.sendBeacon()但问题是我们需要将Authorization令牌传递给它，而sendBeacon没有提供，所以我找到了其他更多的解决方案有效且非常容易实施。

解决方案是带有keepalive标志的本机fetch API。

keepalive 选项可用于允许请求超过页面。 带有 keepalive 标志的 Fetch 是 Navigator.sendBeacon() API 的替代品。

https://developer.mozilla.org/en-US/docs/Web/API/fetch#parameters

代码

fetch(`<URL>`, {
  keepalive: true,
  method: '<METHOD>',
  headers: {
    'content-type': 'application/json',
    // any header you can pass here
  },
  body: JSON.stringify({ data: 'any data' }),
});

Answer 5

因为方法 sendBeacon(..) 不允许标题操作，我将它们作为普通字段添加到表单中：

    const formData = new FormData();
    formData.append('authorization', myAuthService.getCachedToken());
    navigator.sendBeacon(myURL, formData);

然后在主机端，我添加了一个简单的中间件类 (.Net)，它捕获没有标头的 POST 请求并从正文中复制它们：

    public class AuthMiddleware
    {
        ...
        ...
        public async Task Invoke(HttpContext context)
        {
            string authHeader = context.Request.Headers["Authorization"];
            if (authHeader == null && context.Request.Method=="POST")
            {
                context.Request.Headers["Authorization"] = string.Format("Bearer {0}",
                    context.Request.Form["authorization"].ToString());
            }

            await _next.Invoke(context);
        }
    }

Answer 6

作为答案发布，因为我不允许在答案下发表评论：

对于 Chrome，在 Chrome 版本 81 中修复了 navigator.sendBeacon 为非 CORS 安全列表类型发送 Blob 的问题，因此现在可以安全使用。https://bugs.chromium.org/p/chromium/issues/detail?id=724929

对于 IE，卸载事件中的替代方法是使用同步 ajax 请求，因为 IE 不支持 sendBeacon 但在我的情况下支持同步 ajax 调用。

Answer 7

出于安全考虑，Chrome 39 被禁用后，您无法使用 JSON 发送数据。

您可以尝试使用纯文本发送数据。 但不要忘记来自后端的解析文本。

Answer 8

在搜索这个问题的答案后，我发现为了使用导航器传递标头，我们需要传递一个 blob 对象。

例如

var headers = {type: 'application/json'};
var blob = new Blob(request, headers);
navigator.sendBeacon('url/to/send', blob);