Hinzufügen von benutzerdefinierten HTTP-Headern mit JavaScript

Question

Wenn ich auf einer HTML-Seite auf den Link eines Bild- ("img") oder Anker-Tags ("a") klicke, möchte ich benutzerdefinierte Kopfzeilen für die GET-Anfrage hinzufügen. Diese Links dienen in der Regel zum Herunterladen von dynamischen Inhalten. Diese Header könnten SAML-Header oder benutzerdefinierte anwendungsspezifische Header sein.

Ist es möglich, diese benutzerdefinierten Kopfzeilen über JavaScript hinzuzufügen? Oder wenn ich diese über XMLHttpRequest hinzufüge, wie kann ich dann die Download-Funktionalität erreichen?

Diese Anforderung gilt nur für IE6 oder 7.

Answer 1

Wenn Sie Folgendes verwenden XHR entonces setRequestHeader sollte funktionieren, z.B.

xhr.setRequestHeader('custom-header', 'value');

P.S. Sie sollten Folgendes verwenden Hijax um das Verhalten Ihrer Anker so zu ändern, dass es funktioniert, wenn AJAX aus irgendeinem Grund für Ihre Kunden nicht funktioniert (z. B. ein fehlerhaftes Skript an anderer Stelle auf der Seite).

Answer 2

Ich denke, der einfachste Weg, dies zu erreichen, ist die Verwendung von Querystrings anstelle von HTTP-Headern.

Answer 3

Die einzige Möglichkeit, einer Anfrage von einem Browser aus Kopfzeilen hinzuzufügen, ist die Verwendung der Methode XmlHttpRequest setRequestHeader.

Wenn Sie dies mit einer "GET"-Anfrage verwenden, wird die Ressource heruntergeladen. Der Trick besteht dann darin, auf die Ressource in der vorgesehenen Weise zuzugreifen. Angeblich sollte es möglich sein, die GET-Antwort für einen kurzen Zeitraum zwischenzuspeichern, so dass die Navigation zu einer neuen URL oder die Erstellung eines IMG-Tags mit einer src-URL die zwischengespeicherte Antwort des vorherigen "GET" verwenden sollte. Allerdings ist es sehr wahrscheinlich, dass dies nicht klappt, vor allem im IE, der in Bezug auf den Cache eine Art Eigengesetz ist.

Letztendlich stimme ich mit Mehrdad überein, die Verwendung von Query-Strings ist die einfachste und zuverlässigste Methode.

Eine andere eigenwillige Alternative ist die Verwendung einer XHR, um eine Anfrage an eine URL zu stellen, die Ihre Absicht, auf eine Ressource zuzugreifen, angibt. Sie könnte mit einem Sitzungs-Cookie antworten, das bei der nachfolgenden Anfrage nach dem Bild oder Link mitgeführt wird.

Answer 4

Im Jahr 2021 kann dies erreicht werden durch Servicekräfte .

Zunächst müssen Sie einen Service Worker auf Ihrer Seite registrieren.

// index.html
window.addEventListener('load', function () {
    navigator
        .serviceWorker
        .register('/service-worker.js');
});

Im Service Worker wird eine Anfrage erfasst, geändert und weitergeleitet, indem die WindowOrWorkerGlobalScope.fetch() Methode.

// service-worker.js
self.addEventListener('fetch', function (event) {
    event.respondWith(async function () {
        let headers = new Headers()
        headers.append("X-Custom-Header", "Random value")
        return fetch(event.request, {headers: headers})
    }());
});

Bitte beachten Sie, dass einige Webbrowser geänderte Anfragen nicht in der Entwicklerkonsole anzeigen. In diesem Fall können die Anfragen mit Tools wie tcpdump, Wireshark oder in den Protokollen eines Servers beobachtet werden.

Answer 5

Wie bereits gesagt, ist der einfachste Weg die Verwendung von Querystring.

Wenn Sie dies jedoch aus Sicherheitsgründen nicht können, sollten Sie die Verwendung von Cookies in Betracht ziehen.