Navigator.sendBeacon（）传递头信息 [英] Navigator.sendBeacon() to pass header information

问题描述

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

I am using navigator for communicating with the server , but problem is that we need to pass some header information as there is filter which recognise the request is from the valid source.

有人可以提供帮助吗？

谢谢。

推荐答案

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

@Vipul Panth has helpful information, but I wanted to provide some more complete details.

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

First, note that navigator.sendBeacon is not supported in all browsers. See more detail about this function as well as currently supported browsers at the MDN documentation.

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

You do indeed create a blob to provide headers. Here is an example:

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 中的任何内容。根据 W3C ，这似乎是您可以在信标中设置的唯一标题：

navigator.sendBeacon will send a POST request with the Content-Type request header set to whatever is in headers.type. This seems to be the only header you can set in a beacon though, per W3C:

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

The sendBeacon method does not provide ability to customize the request method, provide custom request headers, or change other processing properties of the request and response. Applications that require non-default settings for such requests should use the [FETCH] API with keepalive flag set to true.

我能够通过 Chromium bug报告观察一些如何工作的方法。

I was able to observe some of how this worked through this Chromium bug report.

这篇关于Navigator.sendBeacon（）传递头信息的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！