Bir sayfanın HTTP yanıt başlıklarına JavaScript aracılığıyla nasıl erişirim?

İlgili bu soruya iki özel HTTP başlıklarını erişme hakkında sormak modifiye edilmiş.

İlgili:
HTTP istek başlığı alanlarına JavaScript aracılığıyla nasıl erişirim?

Mevcut başlıkları okumak mümkün değildir. Aynı URL'den başka bir istekte bulunabilir ve üstbilgilerini okuyabilirsiniz, ancak üstbilgilerin tam olarak geçerli olana eşit olduğuna dair bir garanti yoktur.

Bir getistek gerçekleştirerek tüm HTTP başlıklarını almak için aşağıdaki JavaScript kodunu kullanın :

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

Maalesef, ilk sayfa isteğiniz için HTTP yanıt başlıklarını verecek bir API yok. Burada yayınlanan asıl soru buydu. Bu edilmiş defalarca sorulan bazı insanlar başka bir veren olmadan orijinal sayfa isteği gerçek yanıt başlıklarını almak istiyorum, çünkü çok.

AJAX İstekleri için:

AJAX üzerinden bir HTTP isteği yapılırsa, getAllResponseHeaders()yöntemle yanıt başlıklarını almak mümkündür . XMLHttpRequest API'sinin bir parçasıdır. Bunun nasıl uygulanabileceğini görmek için fetchSimilarHeaders()aşağıdaki işlevi inceleyin. Bunun, bazı uygulamalar için güvenilir olmayacak soruna geçici bir çözüm olduğunu unutmayın.

myXMLHttpRequest.getAllResponseHeaders();

• API, XMLHttpRequest için aşağıdaki aday önerisinde belirtildi: XMLHttpRequest - W3C Aday Önerisi 3 Ağustos 2010

• Spesifik olarak, getAllResponseHeaders(): yöntem, takip eden bölümde belirtilen w3.org: XMLHttpRequest: getallresponseheaders()yöntemi

• MDN dokümanları da iyidir: developer.mozilla.org:XMLHttpRequest .

Bu, orijinal sayfa isteğinin HTTP yanıt üstbilgileri hakkında bilgi vermez, ancak bu üstbilgilerin ne olduğu konusunda eğitimli tahminler yapmak için kullanılabilir. Bununla ilgili daha fazla bilgi aşağıda açıklanmaktadır.

İlk Sayfa İsteğinden başlık değerlerini alma:

Bu soru ilk olarak birkaç yıl önce sorulmuştur, özellikle geçerli sayfanın orijinal HTTP yanıt başlıklarına nasıl girileceği sorulmuştur (yani içinde javascriptin çalıştığı aynı sayfa). Bu, herhangi bir HTTP isteği için yanıt üstbilgilerini almaktan oldukça farklı bir sorudur. İlk sayfa isteği için, üstbilgiler javascript tarafından kolayca kullanılamaz. Aynı sayfayı AJAX aracılığıyla tekrar talep ederseniz, ihtiyacınız olan başlık değerlerinin güvenilir ve yeterince tutarlı olup olmayacağı, uygulamanıza bağlı olacaktır.

Aşağıda, bu sorunun üstesinden gelmek için birkaç öneri bulunmaktadır.

1. Büyük ölçüde statik olan Kaynaklara İlişkin Talepler

Yanıt büyük ölçüde statikse ve başlıkların istekler arasında çok fazla değişmesi beklenmiyorsa, şu anda bulunduğunuz sayfa için AJAX isteği yapabilir ve bunların sayfanın bir parçası olan aynı değerler olduğunu varsayabilirsiniz. HTTP yanıtı. Bu, yukarıda açıklanan güzel XMLHttpRequest API'sini kullanarak ihtiyacınız olan başlıklara erişmenizi sağlayabilir.

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

İstekler arasında tutarlı olan değerlere gerçekten güvenmeniz gerekiyorsa, bu yaklaşım sorunlu olacaktır, çünkü bunların aynı olduğunu tam olarak garanti edemezsiniz. Bu, özel uygulamanıza ve ihtiyacınız olan değerin bir istekten diğerine değişmeyecek bir şey olup olmadığını bilmenize bağlı olacaktır.

2. Çıkarımlar Yapın

Orada bazı BOM özellikleri tarayıcı başlıklarını bakarak belirler (Tarayıcı Nesne Modeli). Bu özelliklerden bazıları doğrudan HTTP üstbilgilerini yansıtır (örneğin navigator.userAgent, HTTP User-Agentüstbilgisi alanının değerine ayarlanır ). Kullanılabilir özelliklerin etrafından dolaşarak neye ihtiyacınız olduğunu veya HTTP yanıtının ne içerdiğini belirtmek için bazı ipuçları bulabilirsiniz.

3. Onları sakla

Sunucu tarafını kontrol ederseniz, tam yanıtı oluştururken istediğiniz başlıklara erişebilirsiniz. Değerler, istemciye sayfa ile aktarılabilir, bazı biçimlendirmelerde veya belki de satır içi JSON yapısında saklanabilir. Javascript'iniz için her HTTP istek başlığının kullanılabilir olmasını istiyorsanız, bunları sunucuda tekrarlayabilir ve biçimlendirmede gizli değerler olarak geri gönderebilirsiniz. Üstbilgi değerlerini bu şekilde göndermek muhtemelen ideal değildir, ancak kesinlikle ihtiyacınız olan belirli bir değer için bunu yapabilirsiniz. Bu çözüm de tartışmasız verimsizdir, ancak ihtiyacınız varsa işi yapardı.

Düğmesini kullanarak XmlHttpRequestgeçerli sayfayı açabilir ve ardından yanıtın http başlıklarını inceleyebilirsiniz.

En iyi durum sadece bir HEADistek yapmak ve daha sonra başlıkları incelemek.

Bunu yapmanın bazı örnekleri için http://www.jibbering.com/2002/4/httprequest.html adresine bir göz atın.

Sadece 2 sentim.

Servis Çalışanlarıyla Çözüm

Hizmet çalışanları, başlıkları içeren ağ bilgilerine erişebilir. İyi yanı, sadece XMLHttpRequest üzerinde değil, her türlü istekte çalışmasıdır.

Nasıl çalışır:

1. Web sitenize bir servis çalışanı ekleyin.
2. Gönderilen her isteği izleyin.
3. Servis işçiye Make fetchile isteğirespondWith işlevle bulunun.
4. Yanıt geldiğinde, başlıkları okuyun.
5. postMessageFonksiyonu kullanarak hizmet çalışanından başlıkları sayfaya gönderin .

Çalışma örneği:

Servis çalışanları anlamak biraz karmaşık, bu yüzden tüm bunları yapan küçük bir kütüphane inşa ettim. Github'da mevcuttur: https://github.com/gmetais/sw-get-headers .

Sınırlamalar:

• web sitesinin HTTPS'de olması gerekir
• tarayıcının Servis Çalışanlarını desteklemesi gerekir API'sını
• XMLHttpRequest'te olduğu gibi aynı etki alanı / etki alanları arası politikalar geçerlidir

Tüm HTTP üstbilgilerini sözlük olarak erişilebilen bir nesneye ayrıştırmanın bir yolunu arayanlar için headers["content-type"]bir işlev oluşturdum 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"]

Başlık bilgilerini JavaScript'e göndermenin başka bir yolu da çerezler kullanmaktır. Sunucu, istek üstbilgilerinden ihtiyaç duyduğu tüm verileri ayıklayabilir ve Set-Cookieyanıt başlığına geri gönderebilir ve çerezler JavaScript'te okunabilir. Yine de keparo'nun dediği gibi, bunu hepsi için değil, sadece bir veya iki başlık için yapmak en iyisidir.

İstek üstbilgilerinden bahsediyorsak , XmlHttpRequests yaparken kendi üstbilgilerinizi oluşturabilirsiniz.

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

Http başlıklarına erişemezsiniz, ancak bunlarda sağlanan bazı bilgiler DOM'da bulunur. Örneğin, http yönlendiricisini (sic) görmek istiyorsanız document.referrer komutunu kullanın. Diğer http başlıkları için böyle başkaları olabilir. "Http referer javascript" gibi istediğiniz belirli bir şeyi Google'da aramayı deneyin.

Bunun açık olması gerektiğini biliyorum, ama gerçekten istediğim tek şey referans oldu ve herhangi bir yararlı sonuç alamadım "http headers javascript" gibi şeyler aramaya devam etti. Daha spesifik bir sorgu yapabileceğimi nasıl anlayacağımı bilmiyorum.

Birçok insan gibi ben de net bir cevap olmadan ağı kazıyorum :(

Yine de başkalarına yardımcı olabilecek bir bypass buluyorum. Benim durumumda web sunucumu tamamen kontrol ediyorum. Aslında benim uygulamamın bir parçası (son referansa bakın). Http yanıtıma bir komut dosyası eklemek benim için kolaydır. Her html sayfasında küçük bir komut dosyası enjekte etmek için httpd sunucumu değiştirdim. Yalnızca üstbilgim yapımdan hemen sonra, tarayıcımdaki [konumu seçiyorum] dokümanımdaki mevcut bir değişkeni ayarlayan fazladan bir 'js komut dosyası' satırı itiyorum, ancak başka bir seçenek mümkün. Sunucum nodejs ile yazılmış olsa da, aynı tekniğin PHP veya diğerlerinden kullanılabileceğinden şüphem yok.

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

Şimdi sunucumdan yüklenen her html sayfası, bu komut dosyasını tarayıcı tarafından tarayıcıda çalıştırsın. Daha sonra değişkenin olup olmadığını kolayca JavaScript'ten kontrol edebilirim. Benim kullanımımda CORS sorununu önlemek için JSON veya JSON-P profilini kullanmam gerekip gerekmediğini bilmeliyim, ancak aynı teknik başka amaçlar için de kullanılabilir [yani: geliştirme / üretim sunucusu arasında seçim yapın, sunucudan bir REST / API alın anahtar, vb ....]

Tarayıcıda, değişkenimi doğrudan JavaScript'ten kontrol etmem gerekiyor, örneğin Json / JQuery profilimi seçmek için kullandığım örnekte olduğu gibi

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

Kodumu kim kontrol etmek isterse: https://www.npmjs.org/package/gpsdtracking

Mootools kullanarak, this.xhr.getAllResponseHeaders () öğesini kullanabilirsiniz.

Az önce test ettim ve bu benim için Chrome Sürüm 28.0.1500.95'i kullanarak çalışıyor.

Bir dosya indirip dosya adını okumam gerekiyordu. Dosya adı başlıkta, bu yüzden aşağıdakileri yaptım:

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

    }
};

Çıktı:

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

Bu benim tüm yanıt başlıklarını almak için benim komut dosyasıdır:

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

Sonuç olarak yanıt başlıkları.

Bu Hurl.it kullanan bir karşılaştırma testidir:

Başlıkları daha kullanışlı bir nesne olarak almak için ( Raja'nın cevabının iyileştirilmesi ):

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'un bağlantısı benim günümü yaptı. Sadece burada bazı basit çalışma html kodu ekleyerek.
Çağlar, IE9 + ve Presto-Opera 12'den itibaren makul tarayıcılarla çalışır.

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

Not: İkinci bir isteğin üstbilgilerini alırsınız, sonuç ilk istekten farklı olabilir.

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

Bu eski bir soru. Emin değilim destek daha geniş oldu ama ne zaman getAllResponseHeaders()ve getResponseHeader()şimdi oldukça standart olarak görünmektedir: http://www.w3schools.com/xml/dom_http.asp

Daha önce de belirtildiği gibi, sunucu tarafını kontrol ederseniz, ilk istek başlıklarını ilk yanıtta istemciye geri göndermek mümkün olmalıdır.

Örneğin, Express'te aşağıdakiler çalışır:

app.get('/somepage', (req, res) => { res.render('somepage.hbs', {headers: req.headers}); }) Başlıklar şablon içinde kullanılabilir, bu nedenle görsel olarak gizlenebilir, ancak işaretlemeye dahil edilebilir ve clientide javascript tarafından okunabilir.

Sorunun yanlış gittiğini düşünüyorum, İstek başlığını JQuery / JavaScript'ten almak istiyorsanız, cevap basittir. Aspx sayfasındaki tüm istekleri alın ve bir oturum / çerezler koyun, ardından JavaScript sayfasındaki çerezlere erişebilirsiniz.