Acessando os cabeçalhos HTTP da página da web em JavaScript

Question

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

Relacionado a essa questão, que foi modificado 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?

Answer 1

Infelizmente, não existe uma API que forneça os cabeçalhos de resposta HTTP para sua solicitação de página inicial.Essa foi a pergunta original postada aqui.Tem sido perguntou repetidamente, também, porque algumas pessoas gostariam de obter os cabeçalhos de resposta reais da solicitação da página original sem emitir outro.

Para solicitações AJAX:

Se uma solicitação HTTP for feita via 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 o 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 candidata para XMLHttpRequest: XMLHttpRequest - Recomendação do candidato W3C, 3 de agosto de 2010

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

• A documentação do MDN também é boa: desenvolvedor.mozilla.org: XMLHttpRequest.

Isso não fornecerá informações sobre os cabeçalhos de resposta HTTP da solicitação da página original, mas poderá ser usado para fazer suposições fundamentadas sobre quais eram esses cabeçalhos.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 para o pagina atual (ou seja,a mesma página dentro da qual o javascript estava rodando).Esta é uma questão bem diferente de 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 necessários serão confiáveis ​​e suficientemente consistentes se você solicitar a mesma página novamente via AJAX, dependerá de seu aplicativo específico.

A seguir estão algumas sugestões para contornar esse problema.

1.Solicitações de recursos que são em grande parte estáticas

Se a resposta for amplamente estática e não se espera 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 eles têm os mesmos valores que faziam parte da página Resposta HTTP.Isso pode permitir que você acesse os cabeçalhos necessários usando a bela 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 na consistência dos valores entre as solicitações, já que não é possível garantir totalmente que eles sejam iguais.Vai depender da sua aplicação específica e se você sabe que o valor necessário é algo que não mudará de uma solicitação para outra.

2.Faça inferências

Há algumas propriedades da BOM (Modelo de Objeto do Navegador) que o navegador determina observando os cabeçalhos.Algumas dessas propriedades refletem diretamente os cabeçalhos HTTP (por exemplo, navigator.userAgent é definido como o valor do HTTP User-Agent campo de cabeçalho).Ao farejar as propriedades disponíveis, você poderá encontrar o que precisa ou algumas pistas 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 enquanto constrói a resposta completa.Os valores podem ser passados ​​ao 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 fazer isso para o valor específico necessário.Esta solução também é indiscutivelmente ineficiente, mas funcionaria se você precisasse.

Answer 2

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 à corrente.

---

Use o seguinte código JavaScript para obter todos os cabeçalhos HTTP, realizando um get solicitar:

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

Answer 3

Usando XmlHttpRequest Você pode puxar a página atual e examinar os cabeçalhos HTTP da resposta.

O melhor caso é apenas fazer um HEAD Solicite e depois examine os cabeçalhos.

Para alguns exemplos de fazer isso, dê uma olhada http://www.jibbering.com/2002/4/httprequest.html

Apenas meus 2 centavos.

Answer 4

Uma solução com trabalhadores de serviço

Os funcionários de serviços podem acessar informações de rede, que incluem cabeçalhos. A parte boa é que ele funciona com qualquer tipo de solicitação, não apenas xmlhttprequest.

Como funciona:

1. Adicione um trabalhador de serviço no seu site.
2. Assista a cada pedido que está sendo enviado.
3. Fazer o funcionário do serviço fetch o pedido com o respondWith função.
4. Quando a resposta chegar, leia os cabeçalhos.
5. Envie os cabeçalhos do funcionário do serviço para a página com o postMessage função.

Exemplo de trabalho:

Os funcionários dos serviços são um pouco complicados de entender, por isso construí uma pequena biblioteca que faz tudo isso. Está disponível no Github: https://github.com/gmetais/sw-get-ideners.

Limitações:

• O site precisa estar em Https
• o navegador precisa apoiar o Trabalhadores de serviço API
• As políticas do mesmo domínio/domínio cruzado estão em ação, assim como no xmlhttprequest

Answer 5

Outra maneira de enviar as informações do cabeçalho para JavaScript seria através de cookies. O servidor pode extrair quaisquer dados necessários dos cabeçalhos da solicitação e enviá -los de volta para dentro de um Set-Cookie Cabeçalho de resposta - e cookies podem ser lidos no JavaScript. Como Keparo diz, porém, é melhor fazer isso por apenas um ou dois cabeçalhos, e não para todos eles.

Answer 6

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

Answer 7

Se estamos falando sobre Solicitar Cabeçalhos, você pode criar seus próprios cabeçalhos ao fazer xmlHttPrequests.

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

Answer 8

Você não pode acessar os cabeçalhos HTTP, mas algumas das informações fornecidas nelas estão disponíveis no DOM. Por exemplo, se você deseja ver o referente HTTP (SIC), use Document.ReferRer. Pode haver outras pessoas como essa para outros cabeçalhos HTTP. Tente pesquisar no Google a coisa específica que você deseja, como "HTTP Referent JavaScript".

Sei que isso deve ser óbvio, mas continuei procurando coisas como "JavaScript HTTP" quando tudo o que eu realmente queria era o referente e não obteve nenhum resultado útil. Não sei como não sabia que poderia fazer uma consulta mais específica.

Answer 9

Usando Mootools, você pode usar isso.xhr.getAllResponseHeaders ()

Answer 10

Como muitas pessoas, tenho cavado a rede sem resposta real :(

No entanto, descobri um desvio que poderia ajudar os outros. No meu caso, controlo completamente meu servidor da web. De fato, faz parte do meu aplicativo (consulte a referência final). É fácil para mim adicionar um script à minha resposta HTTP. Modifiquei meu servidor HTTPD para injetar um pequeno script em todas as páginas HTML. Eu pressiono apenas uma linha extra 'JS Script' logo após a construção do cabeçalho, que define uma variável existente no meu documento no meu navegador [escolho o local], mas qualquer outra opção é possível. Enquanto meu servidor está escrito no NodeJS, não tenho dúvidas 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 são carregadas do meu servidor, tenha esse script executado pelo navegador na recepção. Eu posso verificar facilmente no JavaScript se a variável existir ou não. Na minha USECASE, preciso saber se devo usar o perfil JSON ou JSON-P para evitar o problema dos CORs, mas a mesma técnica pode ser usada para outros fins [ou seja: escolha entre o servidor de desenvolvimento/produção, obtenha do servidor A REST/API chave, etc ....

No navegador, você só precisa verificar a variável diretamente do JavaScript como no meu exemplo, onde eu o 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 gostaria de verificar meu código:https://www.npmjs.org/package/gpsdtracking

Answer 11

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

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

Answer 12

Esta é uma pergunta antiga. Não tenho certeza quando o apoio se tornou mais amplo, mas getAllResponseHeaders() e getResponseHeader() Parece agora ser bastante padrão: http://www.w3schools.com/xml/dom_http.asp

Answer 13

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 hurl.it:

Answer 14

Para obter os cabeçalhos como um objeto mais útil (melhoria de 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);

Answer 15

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

Em Express, por exemplo, os seguintes trabalhos:

app.get('/somepage', (req, res) => { res.render('somepage.hbs', {headers: req.headers}); }) Os cabeçalhos estão disponíveis dentro do modelo, portanto, podem ser ocultos visualmente, mas incluídos na marcação e lidos pelo Customerside JavaScript.

Answer 16

Eu acho que a pergunta foi de maneira errada, se você deseja receber o cabeçalho da solicitação do JQuery/JavaScript, a resposta é simplesmente não. Pegue toda a solicitação na página ASPX e coloque em uma sessão/cookies, então você pode acessar os cookies na página JavaScript ..