Como acesso os cabeçalhos de resposta HTTP de uma página via JavaScript?

Relacionado a esta pergunta , que foi modificada para perguntar sobre o acesso a dois cabeçalhos HTTP específicos.

Relacionado:
Como acesso os campos do cabeçalho da solicitação HTTP via JavaScript?

Não é possível ler os cabeçalhos atuais. Você pode fazer outra solicitação para o mesmo URL e ler seus cabeçalhos, mas não há garantia de que os cabeçalhos sejam exatamente iguais aos atuais.

Use o seguinte código JavaScript para obter todos os cabeçalhos HTTP executando uma getsolicitação:

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

Infelizmente, não há uma API para fornecer os cabeçalhos de resposta HTTP para sua solicitação de página inicial. Essa foi a pergunta original postada aqui. Também foi solicitado repetidamente , porque algumas pessoas gostariam de obter os cabeçalhos de resposta reais da solicitação de página original sem emitir outro.

Para solicitações AJAX:

Se uma solicitação HTTP for feita sobre AJAX, é possível obter os cabeçalhos de resposta com o getAllResponseHeaders()método Faz parte da API XMLHttpRequest. Para ver como isso pode ser aplicado, confira a fetchSimilarHeaders()função abaixo. Observe que esta é uma solução alternativa para o problema que não será confiável para alguns aplicativos.

myXMLHttpRequest.getAllResponseHeaders();

• A API foi especificada na seguinte recomendação de candidato para XMLHttpRequest: XMLHttpRequest - Recomendação do candidato do W3C em 3 de agosto de 2010

• Especificamente, o getAllResponseHeaders()método foi especificado na seção a seguir: w3.org XMLHttpRequest:: o getallresponseheaders()método

• A documentação MDN é bom, também: developer.mozilla.org:XMLHttpRequest .

Isso não fornecerá informações sobre os cabeçalhos de resposta HTTP da solicitação de página original, mas pode ser usado para fazer palpites sobre o que esses cabeçalhos eram. Mais sobre isso é descrito a seguir.

Obtendo valores de cabeçalho da solicitação de página inicial:

Esta pergunta foi feita pela primeira vez há vários anos, perguntando especificamente sobre como obter os cabeçalhos de resposta HTTP originais da página atual (ou seja, a mesma página dentro da qual o javascript estava sendo executado). Essa é uma pergunta bem diferente do que simplesmente obter os cabeçalhos de resposta para qualquer solicitação HTTP. Para a solicitação inicial da página, os cabeçalhos não estão prontamente disponíveis para javascript. Se os valores de cabeçalho que você precisa serão confiáveis ​​e suficientemente consistentes se você solicitar a mesma página novamente via AJAX dependerá do seu aplicativo específico.

A seguir, são apresentadas algumas sugestões para solucionar esse problema.

1. Solicitações de recursos amplamente estáticos

Se a resposta for basicamente estática e não for esperado que os cabeçalhos mudem muito entre as solicitações, você poderá fazer uma solicitação AJAX para a mesma página em que está atualmente e assumir que são os mesmos valores que faziam parte da página Resposta HTTP. Isso pode permitir que você acesse os cabeçalhos necessários usando a agradável API XMLHttpRequest descrita acima.

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

Essa abordagem será problemática se você realmente precisar confiar nos valores consistentes entre solicitações, pois não poderá garantir totalmente que eles são os mesmos. Vai depender do seu aplicativo específico e se você sabe que o valor necessário é algo que não será alterado de uma solicitação para a seguinte.

2. Faça Inferências

Existem algumas propriedades da lista técnica (modelo de objeto do navegador) que o navegador determina observando os cabeçalhos. Algumas dessas propriedades refletem os cabeçalhos HTTP diretamente (por exemplo, navigator.userAgentsão definidos como o valor do User-Agentcampo do cabeçalho HTTP ). Ao examinar as propriedades disponíveis, você poderá encontrar o que precisa ou algumas dicas para indicar o que a resposta HTTP continha.

3. Esconda-os

Se você controlar o lado do servidor, poderá acessar qualquer cabeçalho que desejar ao criar a resposta completa. Os valores podem ser passados ​​para o cliente com a página, armazenados em alguma marcação ou talvez em uma estrutura JSON embutida. Se você quiser ter todos os cabeçalhos de solicitação HTTP disponíveis para o seu javascript, poderá iterá-los no servidor e enviá-los de volta como valores ocultos na marcação. Provavelmente não é ideal enviar valores de cabeçalho dessa maneira, mas você certamente poderia fazê-lo com o valor específico necessário. Essa solução também é ineficiente, mas funcionaria se você precisasse.

Usando XmlHttpRequestvocê pode acessar a página atual e, em seguida, examinar os cabeçalhos http da resposta.

O melhor caso é apenas fazer uma HEADsolicitação e depois examinar os cabeçalhos.

Para alguns exemplos de como fazer isso, consulte http://www.jibbering.com/2002/4/httprequest.html

Apenas meus 2 centavos.

Uma solução com trabalhadores de serviço

Os funcionários do serviço podem acessar informações da rede, o que inclui cabeçalhos. A parte boa é que ele funciona em qualquer tipo de solicitação, não apenas no XMLHttpRequest.

Como funciona:

1. Adicione um trabalhador de serviço ao seu site.
2. Assista a todos os pedidos que estão sendo enviados.
3. Torne o responsável pelo serviço fetcha solicitação com a respondWithfunção
4. Quando a resposta chegar, leia os cabeçalhos.
5. Envie os cabeçalhos do responsável pelo serviço para a página com a postMessagefunção

Exemplo de trabalho:

Os funcionários do serviço são um pouco complicados de entender, então eu criei uma pequena biblioteca que faz tudo isso. Está disponível no github: https://github.com/gmetais/sw-get-headers .

Limitações:

• o site precisa estar em HTTPS
• o navegador precisa oferecer suporte à API de Service Workers
• as políticas de mesmo domínio / entre domínios estão em ação, assim como no XMLHttpRequest

Para aqueles que procuram uma maneira de analisar todos os cabeçalhos HTTP em um objeto que pode ser acessado como um dicionário headers["content-type"], criei uma função 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"]

Outra maneira de enviar informações de cabeçalho para JavaScript seria por meio de cookies. O servidor pode extrair os dados de que precisa dos cabeçalhos da solicitação e enviá-los de volta para um Set-Cookiecabeçalho de resposta - e os cookies podem ser lidos em JavaScript. Como diz o keparo, no entanto, é melhor fazer isso com apenas um ou dois cabeçalhos, em vez de com todos eles.

Se estamos falando de cabeçalhos de solicitação , você pode criar seus próprios cabeçalhos ao executar XmlHttpRequests.

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

Você não pode acessar os cabeçalhos http, mas algumas das informações fornecidas neles estão disponíveis no DOM. Por exemplo, se você deseja ver o (s) referenciador http, use document.referrer. Pode haver outros como este para outros cabeçalhos http. Tente pesquisar no Google a coisa específica que você deseja, como "http referer javascript".

Eu sei que isso deve ser óbvio, mas continuei pesquisando coisas como "http cabeçalhos javascript" quando tudo o que eu realmente queria era o referenciador e não obtive nenhum resultado útil. Não sei como não percebi que poderia fazer uma consulta mais específica.

Como muitas pessoas, eu tenho procurado na net sem uma resposta real :(

No entanto, descobri um desvio que poderia ajudar os outros. No meu caso, controlo totalmente o meu servidor web. De fato, faz parte do meu aplicativo (consulte a referência final). É fácil adicionar um script à minha resposta http. Modifiquei meu servidor httpd para injetar um pequeno script em todas as páginas html. Eu apenas envio uma linha extra de 'js script' logo após a construção do meu cabeçalho, que define uma variável existente do meu documento no meu navegador [escolho o local], mas qualquer outra opção é possível. Enquanto meu servidor está escrito em nodejs, não tenho dúvida de que a mesma técnica pode ser usada no PHP ou em outros.

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

Agora, todas as páginas html carregadas do meu servidor têm esse script executado pelo navegador na recepção. Posso verificar facilmente no JavaScript se a variável existe ou não. Na minha base de dados, preciso saber se devo usar o perfil JSON ou JSON-P para evitar o problema do CORS, mas a mesma técnica pode ser usada para outros fins [por exemplo: escolha entre servidor de desenvolvimento / produção, obtenha do servidor um REST / API do servidor chave, etc ...]

No navegador, você só precisa verificar a variável diretamente do JavaScript, como no meu exemplo, onde eu a uso para selecionar meu perfil 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);

Para quem quiser conferir meu código: https://www.npmjs.org/package/gpsdtracking

Usando mootools, você pode usar this.xhr.getAllResponseHeaders ()

Acabei de testar e isso funciona para mim usando a versão 28.0.1500.95 do Chrome.

Eu estava precisando baixar um arquivo e ler o nome do arquivo. O nome do arquivo está no cabeçalho, então eu fiz o seguinte:

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

    }
};

Resultado:

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

Este é o meu script para obter todos os cabeçalhos de resposta:

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

Tendo como resultado os cabeçalhos de resposta.

Este é um teste de comparação usando o Hurl.it:

Para obter os cabeçalhos como um objeto mais acessível (melhoria da resposta de 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);

O link de Allain Lalonde fez o meu dia. Apenas adicionando algum código html de trabalho simples aqui.
Funciona com qualquer navegador razoável desde as idades, mais o IE9 + e o 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>

Nota: Você obtém cabeçalhos de uma segunda solicitação, o resultado pode ser diferente da solicitação inicial.

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

Esta é uma pergunta antiga. Não tenho certeza quando o suporte tornou-se mais amplo, mas getAllResponseHeaders()e getResponseHeader()parecem agora estar bastante normal: http://www.w3schools.com/xml/dom_http.asp

Como já foi mencionado, se você controlar o lado do servidor, será possível enviar os cabeçalhos da solicitação inicial de volta ao cliente na resposta inicial.

No Express, por exemplo, o seguinte funciona:

app.get('/somepage', (req, res) => { res.render('somepage.hbs', {headers: req.headers}); }) Os cabeçalhos estão disponíveis no modelo, para que possam ser ocultados visualmente, mas incluídos na marcação e lidos pelo javascript do lado do cliente.

Eu acho que a pergunta foi errada. Se você deseja pegar o cabeçalho Request no JQuery / JavaScript, a resposta é simplesmente Não. As outras soluções são criar uma página aspx ou página jsp, então podemos acessar facilmente o cabeçalho da solicitação. Pegue toda a solicitação na página aspx e coloque em uma sessão / cookies para acessar os cookies na página JavaScript.