Navigator.sendBeacon() to pass header information

Question

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.

Can anybody help on this?

Thanks.

Answer 1

See the Navigator.sendBeacon MDN documentation for further information.

Create a blob to provide headers. Here is an example:

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

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:

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.

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