Navigator.sendBeacon() um header-Informationen übergeben

Ich bin mit navigator für die Kommunikation mit dem server , aber das problem ist, dass wir weitergeben müssen einige header-Informationen gibt es filter, die erkennen, wird die Anfrage von den gültigen Quelle.

Kann jemand helfen auf diese?

Dank.

InformationsquelleAutor Vipul Panth | 2016-11-10
  1. 14

    @Vipul Panth finden Sie hilfreiche Informationen, aber ich wollte noch mehr nachlesen.

    Beachten Sie zunächst, dass navigator.sendBeacon wird nicht unterstützt in allen Browsern. Sehen Sie mehr Details über diese Funktion sowie die derzeit unterstützten Browsern im MDN-Dokumentation.

    Tun Sie in der Tat erstellen einer blob zu bieten-Header. Hier ist ein Beispiel:

    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 senden einer POST-Anforderung mit den Content-Type-header der Anforderung festgelegt ist, was in headers.type. Dies scheint die einzige header kannst du im beacon obwohl, pro W3C:

    Den sendBeacon Methode keine Möglichkeit zum anpassen der request-Methode, stellen Sie benutzerdefinierte request-Header aus, oder ändern Sie andere Eigenschaften für das verarbeiten der Anforderung und Antwort. Anwendungen, die erfordern nicht-Standard-Einstellungen für solche Anfragen sollte mit der [FETCH] - API mit keepalive-flag auf true gesetzt.

    Konnte ich beobachten, wie diese sich mit dieser Chromium bug-report.

    • Ja, Sie sind ganz korrekt, da dies ein experimenteller Ansatz als pro docs und nur in den neuesten browser wie chrome v39.
    • Korrigieren Sie mich, wenn ich falsch Liege, aber keepalive für fetch nicht einmal umgesetzt in Chrome noch . groups.google.com/a/chromium.org/forum/#!Thema/laden-dev/...
    • Leider ist dies nicht mehr zugelassen und wirft einen Fehler aus Sicherheitsgründen von Chrome 59. Siehe: crbug.com/720283
    InformationsquelleAutor Scotty H
  2. 3

    Wie geschrieben Processing-Modell von sendBeacon :

    Extrakt Objekts byte-stream (transmittedData) und Inhaltstyp (contentType).

    Wie die Extraktion durchgeführt wird, ist hier beschrieben

    , Was ich gesammelt habe ist, dass der content-type der übertragenen Daten extrahiert, und es wird festgelegt, wie der Content-Type der HTTP-Anfrage.

    1) Wenn ein Blob-Objekt gesendet, wird der Content-Type wird der Blob-Typ.

    2) wird ein FormData-Objekt gesendet, wird der Content-Type wird multipart/form-data

    3) Wenn ein URLSearchParams Objekt gesendet, wird der Content-Type wird application/x-www-form-urlencoded

    4), Wenn eine normale Zeichenfolge gesendet wird, wird der Content-Type wird text/plain

    Javascript-code zum implementieren der verschiedenen Objekte finden Sie hier

    InformationsquelleAutor Useful Angle
  3. 3

    Wenn Sie Chrome verwenden und Sie versuchen, den content-type-header, dann haben Sie wahrscheinlich einige Probleme aufgrund von Sicherheits-Beschränkungen :

    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.

    Siehe diesen thread

    InformationsquelleAutor ersefuril
  4. 0

    Nach der Suche nach einer Antwort für diese Frage fand ich heraus, dass für die Weitergabe des headers mit navigator-wir übergeben zu müssen, ein blob-Objekt.

    Zum Beispiel

    var headers = {type: 'application/json'};
var blob = new Blob(request, headers);
navigator.sendBeacon('url/to/send', blob);
    • Meinst du profitieren new blob so, dass es new Blob?
    • Auch was request? Können Sie zitieren, alle Ihre Quellen?
    • die Anfrage die ich spreche, ist eine Liste der ticket-Daten zu senden, während der browser geschlossen wird zusammen mit einem security-header, so dass der server erkennen kann, das es so eine Anfrage genehmigen.
    InformationsquelleAutor Vipul Panth
Schreibe einen Kommentar