okaits
@okaits

Are you sure you want to delete the question?

Leaving a resolved question undeleted may help others!

navigator.sendBeacon()でAuthorizationヘッダーを追加したい

解決したいこと

Javascriptをコンテンツスクリプトとして拡張機能に組み込んで、特定のページを閉じた時にデータを送信するようにしたいのですが、navigator.sendBeacon()を使ってサーバーにPOSTする時にAuthorizationヘッダーを追加したいです。

発生している問題・エラー

navigator.sendBeacon()Content-type以外のヘッダーを変更できない

該当コード

window.onbeforeunload = function() {
    navigator.sendBeacon("http://localhost:5000/video", JSON.stringify({"status": "closed"})); //このリクエストにAuthorizationヘッダーを追加したい
};

自分で試したこと

XMLHttpRequest$.post(jQuery)や$.ajax(jQuery)を試しましたが、どれも送信完了する前にページが閉じてキャンセルされてしまいます。
また、Blobを使い変更しようとしましたが、Blobはtype(Content-type)しか指定できなかったので失敗しました。

参考

使用ブラウザはGoogle Chrome 107.0.5304.87、APIはFlaskです。

0

1Answer

navigator.sendBeacon() でヘッダをセットする方法はありません。

navigator.sendBeacon()keepalive: true オプション付きの fetch() を呼ぶのと等しい処理を行うと定義されています。よって同等の fetch() を自分で書けばヘッダもセットできます。ただしこの定義は後付けで作られたもので、 navigator.sendBeacon() がサポートされている環境でも keepalive オプションが未実装なことがあります。詳しくは下記ページを参照してください。

1Like

Comments

  1. @okaits

    Questioner

    ありがとうございます!できました!

Your answer might help someone💌