JavaScriptを使用してページのHTTP応答ヘッダーにアクセスするにはどうすればよいですか？

この質問に関連し、2つの特定のHTTPヘッダーへのアクセスについて質問するように変更されました。

関連：
JavaScript経由でHTTPリクエストヘッダーフィールドにアクセスするにはどうすればよいですか？

現在のヘッダーを読み取ることはできません。同じURLに別のリクエストを作成してそのヘッダーを読み取ることもできますが、ヘッダーが現在のヘッダーと完全に一致することは保証されません。

次のJavaScriptコードを使用して、getリクエストを実行してすべてのHTTPヘッダーを取得します。

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

残念ながら、最初のページ要求のHTTP応答ヘッダーを提供するAPIはありません。ここに投稿された元の質問でした。それはされています繰り返し尋ねた一部の人々は別のものを発行せずに元のページ要求の実際のレスポンスヘッダを取得したいと思いますので、あまりにも、。

AJAXリクエストの場合：

HTTPリクエストがAJAXを介して行われる場合、getAllResponseHeaders()メソッドで応答ヘッダーを取得することが可能です。これはXMLHttpRequest APIの一部です。これをどのように適用できるかを確認するには、fetchSimilarHeaders()以下の関数を確認してください。これは、一部のアプリケーションでは信頼できない問題の回避策であることに注意してください。

myXMLHttpRequest.getAllResponseHeaders();

• APIは、XMLHttpRequestの次の推奨候補で指定されています。 。XMLHttpRequest-W3C候補の推奨事項2010年8月3日

• 具体的には、getAllResponseHeaders()該方法は、以下のセクションで指定されたw3.org： XMLHttpRequest。getallresponseheaders()方法

• MDNドキュメントも良いです：developer.mozilla.org：XMLHttpRequest。

これは、元のページリクエストのHTTP応答ヘッダーに関する情報を提供しませんが、それらのヘッダーが何であるかについて知識に基づいた推測を行うために使用できます。その詳細については、次に説明します。

初期ページ要求からヘッダー値を取得する：

この質問は数年前に最初に尋ねられ、現在のページの元のHTTP応答ヘッダーを取得する方法について具体的に尋ねました（つまり、JavaScriptが実行されているのと同じページ）。これは、任意のHTTP要求の応答ヘッダーを単に取得することとはまったく異なる質問です。最初のページリクエストでは、ヘッダーをJavaScriptで簡単に使用できません。AJAXを介して同じページを再度リクエストした場合に必要なヘッダー値が確実かつ十分に一貫するかどうかは、特定のアプリケーションに依存します。

以下は、その問題を回避するためのいくつかの提案です。

1.ほぼ静的なリソースへのリクエスト

応答がほとんど静的であり、ヘッダーがリクエスト間で大きく変化することが予想されない場合は、現在開いている同じページに対してAJAXリクエストを行い、それらがページの一部であった同じ値であると想定することができますHTTP応答。これにより、上記の素敵なXMLHttpRequest APIを使用して必要なヘッダーにアクセスできるようになります。

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);
}

値が同じであることを完全に保証することはできないため、リクエスト間で一貫した値に本当に依存する必要がある場合、このアプローチは問題になります。これは、特定のアプリケーションと、必要な値が1つの要求から次の要求に変更されないものであることを知っているかどうかに依存します。

2.推論する

あり、いくつかのBOMプロパティブラウザはヘッダを見て、判断し（ブラウザオブジェクトモデル）。これらのプロパティの一部は、HTTPヘッダーを直接反映します（たとえばnavigator.userAgent、HTTP User-Agentヘッダーフィールドの値に設定されます）。利用可能なプロパティをスニッフィングすることで、必要なもの、またはHTTP応答に何が含まれているかを示す手掛かりを見つけることができる場合があります。

3.それらを隠します

サーバー側を制御する場合、完全な応答を作成するときに、任意のヘッダーにアクセスできます。値は、ページとともにクライアントに渡され、いくつかのマークアップで、またはおそらくインライン化されたJSON構造で隠されます。すべてのHTTPリクエストヘッダーをJavaScriptで利用できるようにしたい場合は、サーバー上でそれらを繰り返し処理し、マークアップの非表示の値としてそれらを送り返すことができます。この方法でヘッダー値を送信することはおそらく理想的ではありませんが、必要な特定の値に対して確実に送信することができます。このソリューションも間違いなく非効率的ですが、必要に応じて機能します。

を使用XmlHttpRequestすると、現在のページをプルアップして、応答のhttpヘッダーを調べることができます。

最善のケースは、HEADリクエストを実行してからヘッダーを調べることです。

これを行ういくつかの例については、http： //www.jibbering.com/2002/4/httprequest.htmlを参照してください。

ちょうど私の2セント。

サービスワーカーによるソリューション

Service Workerは、ヘッダーを含むネットワーク情報にアクセスできます。良い点は、XMLHttpRequestだけでなく、あらゆる種類のリクエストで機能することです。

使い方：

1. WebサイトにService Workerを追加します。
2. 送信されるすべてのリクエストを監視します。
3. 関数を使用して、サービスワーカーをfetchリクエストにしrespondWithます。
4. 応答が到着したら、ヘッダーを読み取ります。
5. Service WorkerからpostMessage関数を含むページにヘッダーを送信します。

作業例：

Service Workerは理解するのが少し複雑なので、これをすべて行う小さなライブラリーを作成しました。github：https : //github.com/gmetais/sw-get-headersで入手できます。

制限：

• ウェブサイトはHTTPSである必要があります
• ブラウザはService Workers API をサポートする必要があります
• XMLHttpRequestと同じように、同じドメイン/クロスドメインのポリシーが機能している

辞書としてアクセスできるオブジェクトにすべてのHTTPヘッダーを解析する方法を探している人のためにheaders["content-type"]、関数を作成しました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"]

ヘッダー情報をJavaScriptに送信する別の方法は、Cookieを使用することです。サーバーは、要求ヘッダーから必要なデータを抽出して、Set-Cookie応答ヘッダー内に送り返すことができます。CookieはJavaScriptで読み取ることができます。しかし、ケパロが言うように、すべてのヘッダーではなく、1つまたは2つのヘッダーに対してこれを行うのが最善です。

リクエストヘッダーの場合は、XmlHttpRequestsを実行するときに独自のヘッダーを作成できます。

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

httpヘッダーにはアクセスできませんが、ヘッダーで提供される情報の一部はDOMで利用できます。たとえば、httpリファラー（sic）を表示する場合は、document.referrerを使用します。他のhttpヘッダーには、このようなものがあるかもしれません。「httpリファラーjavascript」など、必要な特定のものをグーグルで試します。

私はこれが明白であることを知っていますが、私が本当に望んでいたのはリファラーだけであり、有用な結果が得られなかったときに、 "http headers javascript"のようなものを探し続けました。より具体的なクエリを実行できることに気づかなかった理由がわかりません。

多くの人々のように、私は本当の答えなしでネットを掘っています:(

それでも、他の人を助けることができるバイパスを見つけました。私の場合は、Webサーバーを完全に制御しています。実際、それは私のアプリケーションの一部です（最後のリファレンスを参照）。スクリプトをhttp応答に追加するのは簡単です。httpdサーバーを変更して、すべてのhtmlページ内に小さなスクリプトを挿入しました。ヘッダー構成の直後に追加の「jsスクリプト」行をプッシュするだけで、ブラウザー内のドキュメントから既存の変数を設定します（場所を選択します）が、他のオプションも可能です。私のサーバーはnodejsで作成されていますが、同じ手法がPHPや他の方法で使用できることは間違いありません。

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

サーバーからロードされたすべてのhtmlページで、このスクリプトが受信時にブラウザーによって実行されます。その後、変数が存在するかどうかをJavaScriptから簡単に確認できます。私のユースケースでは、CORSの問題を回避するためにJSONまたはJSON-Pプロファイルを使用する必要があるかどうかを知る必要がありますが、同じ手法を他の目的に使用できます[つまり、開発/本番サーバーを選択するか、サーバーからREST / APIを取得しますキーなど...]

ブラウザーでは、例のようにJavaScriptから直接変数を確認するだけでよく、Json / JQueryプロファイルを選択するために使用します。

 // 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);

私のコードをチェックしたい人のために：https : //www.npmjs.org/package/gpsdtracking

mootoolsを使用すると、this.xhr.getAllResponseHeaders（）を使用できます

私はテストしたところ、Chromeバージョン28.0.1500.95を使用して動作します。

ファイルをダウンロードしてファイル名を読む必要がありました。ファイル名はヘッダーにあるので、次のようにしました。

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 ++++++++");

    }
};

出力：

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

これは、すべての応答ヘッダーを取得するためのスクリプトです。

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);

結果として、応答ヘッダーを持ちます。

これはHurl.itを使用した比較テストです。

ヘッダーをより便利なオブジェクトとして取得するには（Rajaの回答の改善）：

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 Lalondeのリンクが私の一日を作りました。ここに単純な動作するHTMLコードを追加するだけです。
年齢に加えてIE9 +および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>

注：2番目のリクエストのヘッダーを取得します。結果は最初のリクエストとは異なる場合があります。

<!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>

これは古い質問です。サポートがより広くなった時期はわかりませんがgetAllResponseHeaders()、getResponseHeader()現在はかなり標準的であるようです：http : //www.w3schools.com/xml/dom_http.asp

すでに述べたように、サーバー側を制御する場合は、初期応答で初期要求ヘッダーをクライアントに送り返すことができるはずです。

たとえば、Expressでは次のように機能します。

app.get('/somepage', (req, res) => { res.render('somepage.hbs', {headers: req.headers}); }) ヘッダーはテンプレート内で使用できるため、視覚的に非表示にできますが、マークアップに含めて、クライアントサイドのJavaScriptで読み取ることができます。

質問は間違った方法で行ったと思います。JQuery/ JavaScriptからリクエストヘッダーを取得する場合、答えは単純に「いいえ」です。他の解決策は、aspxページまたはjspページを作成することで、リクエストヘッダーに簡単にアクセスできます。aspxページのすべてのリクエストを取得してセッション/ Cookieに入れると、JavaScriptページのCookieにアクセスできます。