I want to use navigator.sendBeacon
in a client's website. But it is using the POST method and the request is not reaching the server as the request url's domain is different. I tried different ways of using sendBeacon()
, but all are using the POST method.
1.
var data = new FormData();<br>
navigator.sendBeacon(myurl, data);
navigator.sendBeacon(myurl, "");
navigator.sendBeacon(myurl);
Is there a way to make GET call using sendBeacon()
? Or is there any way to use sendBeacon()
in a cross-domain environment.
With the sendBeacon () method, the data is transmitted asynchronously when the user agent has an opportunity to do so, without delaying unload or the next navigation. This means: Web sites often want to send analytics or diagnostics to the server when the user has finished with the page.
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.
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.
Therefore, it can be more efficient and reliable than the fetch API, which may block execution of other code and be a heavier load on the CPU. For example, you might use navigator.sendBeacon () to log analytics right as the page is closed.
From the W3C specification, on which browser implementations are based:
The sendBeacon() method does not provide ability to customize the request method. Applications that require non-default settings for such requests should use the FETCH API with keep-alive flag set to true.
Per this documentation, here's an example of how the Fetch API can be used to replicate the behavior of sendBeacon
:
fetch(url, {
method: ...,
body: ...,
headers: ...,
credentials: 'include',
mode: 'no-cors',
keep-alive: true,
})
Although navigator.sendBeacon
uses POST you can still pass the data as a ?query=string
and this will reach the URL endpoint.
You can then simply parse the URL on the server and extract the data that way.
I use this for approach to debug production sites when I want to keep the DevTools closed but still see messages in my local terminal. Here is the output...
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 -
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With