Wie greife ich über JavaScript auf die HTTP-Antwortheader einer Seite zu?

Bezogen auf diese Frage , die geändert wurde, um nach dem Zugriff auf zwei bestimmte HTTP-Header zu fragen.

Verwandte Themen :
Wie greife ich über JavaScript auf die HTTP-Anforderungsheaderfelder zu?

Es ist nicht möglich, die aktuellen Header zu lesen. Sie könnten eine weitere Anfrage an dieselbe URL stellen und deren Header lesen, es gibt jedoch keine Garantie dafür, dass die Header genau dem aktuellen entsprechen.

Verwenden Sie den folgenden JavaScript-Code, um alle HTTP-Header durch Ausführen einer getAnforderung abzurufen:

var req = new XMLHttpRequest();
req.open('GET', document.location, false);
req.send(null);
var headers = req.getAllResponseHeaders().toLowerCase();
alert(headers);

Leider gibt es keine API, mit der Sie die HTTP-Antwortheader für Ihre erste Seitenanforderung erhalten. Das war die ursprüngliche Frage, die hier gestellt wurde. Es wurde auch wiederholt gefragt , weil einige Leute die tatsächlichen Antwortheader der ursprünglichen Seitenanforderung erhalten möchten, ohne eine andere auszugeben.

Für AJAX-Anfragen:

Wenn eine HTTP-Anfrage über AJAX gestellt wird, können die Antwortheader mit der getAllResponseHeaders()Methode abgerufen werden. Es ist Teil der XMLHttpRequest-API. Um zu sehen, wie dies angewendet werden kann, überprüfen Sie die folgende fetchSimilarHeaders()Funktion. Beachten Sie, dass dies eine Problemumgehung ist, die für einige Anwendungen nicht zuverlässig ist.

myXMLHttpRequest.getAllResponseHeaders();

• Die API wurde in der folgenden Kandidatenempfehlung für XMLHttpRequest angegeben: XMLHttpRequest - W3C-Kandidatenempfehlung 3. August 2010

• Insbesondere wurde die getAllResponseHeaders()Methode im folgenden Abschnitt angegeben: w3.org :: XMLHttpRequestdie getallresponseheaders()Methode

• Die MDN-Dokumentation ist auch gut: developer.mozilla.org :XMLHttpRequest .

Dies gibt Ihnen keine Informationen über die HTTP-Antwortheader der ursprünglichen Seitenanforderung, kann jedoch verwendet werden, um fundierte Vermutungen über diese Header anzustellen. Mehr dazu wird als nächstes beschrieben.

Abrufen von Header-Werten aus der anfänglichen Seitenanforderung:

Diese Frage wurde vor einigen Jahren zum ersten Mal gestellt und speziell gefragt, wie die ursprünglichen HTTP-Antwortheader für die aktuelle Seite (dh dieselbe Seite, auf der das Javascript ausgeführt wurde) abgerufen werden können. Dies ist eine ganz andere Frage als nur das Abrufen der Antwortheader für eine HTTP-Anforderung. Bei der ersten Seitenanforderung stehen die Header für Javascript nicht ohne weiteres zur Verfügung. Ob die von Ihnen benötigten Header-Werte zuverlässig und ausreichend konsistent sind, wenn Sie dieselbe Seite erneut über AJAX anfordern, hängt von Ihrer speziellen Anwendung ab.

Im Folgenden finden Sie einige Vorschläge, um dieses Problem zu umgehen.

1. Anfragen zu Ressourcen, die weitgehend statisch sind

Wenn die Antwort weitgehend statisch ist und sich die Header zwischen den Anforderungen voraussichtlich nicht wesentlich ändern, können Sie eine AJAX-Anforderung für dieselbe Seite stellen, auf der Sie sich gerade befinden, und davon ausgehen, dass es sich um dieselben Werte handelt, die Teil der Seiten waren HTTP-Antwort. Auf diese Weise können Sie mithilfe der oben beschriebenen netten XMLHttpRequest-API auf die benötigten Header zugreifen.

function fetchSimilarHeaders (callback) {
    var request = new XMLHttpRequest();
    request.onreadystatechange = function () {
        if (request.readyState === XMLHttpRequest.DONE) {
            //
            // The following headers may often be similar
            // to those of the original page request...
            //
            if (callback && typeof callback === 'function') {
                callback(request.getAllResponseHeaders());
            }
        }
    };

    //
    // Re-request the same page (document.location)
    // We hope to get the same or similar response headers to those which 
    // came with the current page, but we have no guarantee.
    // Since we are only after the headers, a HEAD request may be sufficient.
    //
    request.open('HEAD', document.location, true);
    request.send(null);
}

Dieser Ansatz ist problematisch, wenn Sie sich wirklich darauf verlassen müssen, dass die Werte zwischen den Anforderungen konsistent sind, da Sie nicht vollständig garantieren können, dass sie gleich sind. Es hängt von Ihrer spezifischen Anwendung ab und davon, ob Sie wissen, dass sich der von Ihnen benötigte Wert nicht von einer Anfrage zur nächsten ändert.

2. Schlüsse ziehen

Es gibt einige Stücklisteneigenschaften (Browserobjektmodell), die der Browser anhand der Überschriften ermittelt. Einige dieser Eigenschaften spiegeln HTTP-Header direkt wider (z. B. navigator.userAgentwird der Wert des HTTP- User-AgentHeaderfelds festgelegt). Durch Durchsuchen der verfügbaren Eigenschaften können Sie möglicherweise das finden, was Sie benötigen, oder einige Hinweise, die angeben, was die HTTP-Antwort enthielt.

3. Verstauen Sie sie

Wenn Sie die Serverseite steuern, können Sie auf jeden beliebigen Header zugreifen, während Sie die vollständige Antwort erstellen. Werte können mit der Seite an den Client übergeben, in einem Markup oder möglicherweise in einer Inline-JSON-Struktur gespeichert werden. Wenn Sie möchten, dass jeder HTTP-Anforderungsheader für Ihr Javascript verfügbar ist, können Sie ihn auf dem Server durchlaufen und als versteckte Werte im Markup zurücksenden. Es ist wahrscheinlich nicht ideal, Header-Werte auf diese Weise zu senden, aber Sie können dies sicherlich für den spezifischen Wert tun, den Sie benötigen. Diese Lösung ist wohl auch ineffizient, aber sie würde den Job machen, wenn Sie sie brauchen.

Mit können XmlHttpRequestSie die aktuelle Seite aufrufen und dann die http-Header der Antwort untersuchen.

Am besten machen Sie einfach eine HEADAnfrage und untersuchen dann die Header.

Einige Beispiele hierfür finden Sie unter http://www.jibbering.com/2002/4/httprequest.html

Nur meine 2 Cent.

Eine Lösung mit Servicemitarbeitern

Servicemitarbeiter können auf Netzwerkinformationen zugreifen, einschließlich Header. Der gute Teil ist, dass es auf jeder Art von Anfrage funktioniert, nicht nur auf XMLHttpRequest.

Wie es funktioniert:

1. Fügen Sie Ihrer Website einen Servicemitarbeiter hinzu.
2. Beobachten Sie jede Anfrage, die gesendet wird.
3. Machen Sie den Servicemitarbeiter fetchzur Anforderung mit der respondWithFunktion.
4. Wenn die Antwort eintrifft, lesen Sie die Header.
5. Senden Sie die Header vom Servicemitarbeiter an die Seite mit der postMessageFunktion.

Arbeitsbeispiel:

Servicemitarbeiter sind etwas kompliziert zu verstehen, deshalb habe ich eine kleine Bibliothek aufgebaut, die all dies erledigt. Es ist auf github verfügbar: https://github.com/gmetais/sw-get-headers .

Einschränkungen:

• Die Website muss auf HTTPS sein
• Der Browser muss die Service Workers- API unterstützen
• Die domänen- / domänenübergreifenden Richtlinien werden genau wie bei XMLHttpRequest ausgeführt

Für diejenigen, die nach einer Möglichkeit suchen, alle HTTP-Header in ein Objekt zu analysieren, auf das als Wörterbuch zugegriffen werden kann headers["content-type"], habe ich eine Funktion erstellt parseHttpHeaders:

function parseHttpHeaders(httpHeaders) {
    return httpHeaders.split("\n")
     .map(x=>x.split(/: */,2))
     .filter(x=>x[0])
     .reduce((ac, x)=>{ac[x[0]] = x[1];return ac;}, {});
}

var req = new XMLHttpRequest();
req.open('GET', document.location, false);
req.send(null);
var headers = parseHttpHeaders(req.getAllResponseHeaders());
// Now we can do:  headers["content-type"]

Eine andere Möglichkeit, Header-Informationen an JavaScript zu senden, sind Cookies. Der Server kann alle benötigten Daten aus den Anforderungsheadern extrahieren und in einem Set-CookieAntwortheader zurücksenden - und Cookies können in JavaScript gelesen werden. Wie Keparo jedoch sagt, ist es am besten, dies nur für ein oder zwei Header zu tun, anstatt für alle.

Wenn es sich um Anforderungsheader handelt , können Sie beim Ausführen von XmlHttpRequests eigene Header erstellen.

var request = new XMLHttpRequest();
request.setRequestHeader("X-Requested-With", "XMLHttpRequest");
request.open("GET", path, true);
request.send(null);

Sie können nicht auf die http-Header zugreifen, aber einige der darin enthaltenen Informationen sind im DOM verfügbar. Wenn Sie beispielsweise den http-Referer (sic) anzeigen möchten, verwenden Sie document.referrer. Möglicherweise gibt es andere für solche http-Header. Versuchen Sie, die gewünschte Sache zu googeln, z. B. "http referer javascript".

Ich weiß, dass dies offensichtlich sein sollte, aber ich suchte weiter nach Dingen wie "http headers javascript", als ich nur den Referer wollte und keine nützlichen Ergebnisse erzielte. Ich weiß nicht, wie ich nicht realisiert habe, dass ich eine spezifischere Anfrage stellen könnte.

Wie viele Leute habe ich ohne wirkliche Antwort im Netz gegraben :(

Ich habe trotzdem einen Bypass gefunden, der anderen helfen könnte. In meinem Fall kontrolliere ich meinen Webserver vollständig. Tatsächlich ist es Teil meiner Bewerbung (siehe Endreferenz). Es fällt mir leicht, meiner http-Antwort ein Skript hinzuzufügen. Ich habe meinen httpd-Server so geändert, dass in jede HTML-Seite ein kleines Skript eingefügt wird. Ich drücke nur direkt nach meiner Header-Konstruktion eine zusätzliche 'js script'-Zeile, die eine vorhandene Variable aus meinem Dokument in meinem Browser festlegt [ich wähle den Speicherort], aber jede andere Option ist möglich. Während mein Server in nodejs geschrieben ist, habe ich keinen Zweifel daran, dass dieselbe Technik von PHP oder anderen verwendet werden kann.

  case ".html":
    response.setHeader("Content-Type", "text/html");
    response.write ("<script>location['GPSD_HTTP_AJAX']=true</script>")
    // process the real contend of my page

Jetzt lassen Sie alle von meinem Server geladenen HTML-Seiten dieses Skript an der Rezeption vom Browser ausführen. Ich kann dann einfach anhand von JavaScript überprüfen, ob die Variable vorhanden ist oder nicht. In meinem Anwendungsfall muss ich wissen, ob ich ein JSON- oder JSON-P-Profil verwenden soll, um CORS-Probleme zu vermeiden. Die gleiche Technik kann jedoch auch für andere Zwecke verwendet werden Schlüssel usw. ....]

Im Browser müssen Sie nur die Variable direkt aus JavaScript überprüfen, wie in meinem Beispiel, wo ich damit mein Json / JQuery-Profil auswähle

 // Select direct Ajax/Json profile if using GpsdTracking/HttpAjax server otherwise use JsonP
  var corsbypass = true;  
  if (location['GPSD_HTTP_AJAX']) corsbypass = false;

  if (corsbypass) { // Json & html served from two different web servers
    var gpsdApi = "http://localhost:4080/geojson.rest?jsoncallback=?";
  } else { // Json & html served from same web server [no ?jsoncallback=]
    var gpsdApi = "geojson.rest?";
  }
  var gpsdRqt = 
      {key   :123456789 // user authentication key
      ,cmd   :'list'    // rest command
      ,group :'all'     // group to retreive
      ,round : true     // ask server to round numbers
   };
   $.getJSON(gpsdApi,gpsdRqt, DevListCB);

Für alle, die meinen Code überprüfen möchten: https://www.npmjs.org/package/gpsdtracking

Mit mootools können Sie this.xhr.getAllResponseHeaders () verwenden.

Ich habe gerade getestet, und dies funktioniert bei mir mit Chrome Version 28.0.1500.95.

Ich musste eine Datei herunterladen und den Dateinamen lesen. Der Dateiname befindet sich in der Kopfzeile, daher habe ich Folgendes getan:

var xhr = new XMLHttpRequest(); 
xhr.open('POST', url, true); 
xhr.responseType = "blob";
xhr.onreadystatechange = function () { 
    if (xhr.readyState == 4) {
        success(xhr.response); // the function to proccess the response

        console.log("++++++ reading headers ++++++++");
        var headers = xhr.getAllResponseHeaders();
        console.log(headers);
        console.log("++++++ reading headers end ++++++++");

    }
};

Ausgabe:

Date: Fri, 16 Aug 2013 16:21:33 GMT
Content-Disposition: attachment;filename=testFileName.doc
Content-Length: 20
Server: Apache-Coyote/1.1
Content-Type: application/octet-stream

Dies ist mein Skript, um alle Antwortheader abzurufen:

var url = "< URL >";

var req = new XMLHttpRequest();
req.open('HEAD', url, false);
req.send(null);
var headers = req.getAllResponseHeaders();

//Show alert with response headers.
alert(headers);

Als Ergebnis die Antwort-Header.

Dies ist ein Vergleichstest mit Hurl.it:

So erhalten Sie die Überschriften als handlicheres Objekt (Verbesserung von Rajas Antwort ):

var req = new XMLHttpRequest();
req.open('GET', document.location, false);
req.send(null);
var headers = req.getAllResponseHeaders().toLowerCase();
headers = headers.split(/\n|\r|\r\n/g).reduce(function(a, b) {
    if (b.length) {
        var [ key, value ] = b.split(': ');
        a[key] = value;
    }
    return a;
}, {});
console.log(headers);

Allain Lalondes Link machte meinen Tag. Fügen Sie hier einfach einfachen HTML-Code hinzu.
Funktioniert mit jedem vernünftigen Browser seit Jahren plus IE9 + und Presto-Opera 12.

<!DOCTYPE html>
<title>(XHR) Show all response headers</title>

<h1>All Response Headers with XHR</h1>
<script>
 var X= new XMLHttpRequest();
 X.open("HEAD", location);
 X.send();
 X.onload= function() { 
   document.body.appendChild(document.createElement("pre")).textContent= X.getAllResponseHeaders();
 }
</script>

Hinweis: Sie erhalten Header einer zweiten Anforderung. Das Ergebnis kann von der ursprünglichen Anforderung abweichen.

<!DOCTYPE html>
<title>fetch() all Response Headers</title>

<h1>All Response Headers with fetch()</h1>
<script>
 var x= "";
 if(window.fetch)
    fetch(location, {method:'HEAD'})
    .then(function(r) {
       r.headers.forEach(
          function(Value, Header) { x= x + Header + "\n" + Value + "\n\n"; }
       );
    })
    .then(function() {
       document.body.appendChild(document.createElement("pre")).textContent= x;
    });
 else
   document.write("This does not work in your browser - no support for fetch API");
</script>

Dies ist eine alte Frage. Nicht sicher , wenn Unterstützung breiter geworden, aber getAllResponseHeaders()und getResponseHeader()scheinen nun ziemlich Standard zu sein: http://www.w3schools.com/xml/dom_http.asp

Wie bereits erwähnt, sollte es möglich sein, die anfänglichen Anforderungsheader in der ersten Antwort an den Client zurückzusenden, wenn Sie die Serverseite steuern.

In Express funktioniert beispielsweise Folgendes:

app.get('/somepage', (req, res) => { res.render('somepage.hbs', {headers: req.headers}); }) Die Header sind dann in der Vorlage verfügbar, können also visuell ausgeblendet, aber im Markup enthalten und von clientseitigem Javascript gelesen werden.

Ich denke, die Frage ist falsch gelaufen. Wenn Sie den Anforderungsheader von JQuery / JavaScript übernehmen möchten, lautet die Antwort einfach Nein. Die andere Lösung besteht darin, eine Aspx- oder JSP-Seite zu erstellen. Dann können wir problemlos auf den Anforderungsheader zugreifen. Nehmen Sie alle Anfragen auf der Aspx-Seite entgegen und setzen Sie sie in eine Sitzung / Cookies. Dann können Sie auf die Cookies auf der JavaScript-Seite zugreifen.