¿Cómo accedo a los encabezados de respuesta HTTP de una página a través de JavaScript?

Relacionado con esta pregunta , que se modificó para preguntar sobre el acceso a dos encabezados HTTP específicos.

Relacionado:
¿Cómo accedo a los campos de encabezado de solicitud HTTP a través de JavaScript?

No es posible leer los encabezados actuales. Puede realizar otra solicitud a la misma URL y leer sus encabezados, pero no hay garantía de que los encabezados sean exactamente iguales a los actuales.

Use el siguiente código JavaScript para obtener todos los encabezados HTTP realizando una getsolicitud:

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

Desafortunadamente, no hay una API que le proporcione los encabezados de respuesta HTTP para su solicitud de página inicial. Esa fue la pregunta original publicada aquí. También se ha preguntado repetidamente porque a algunas personas les gustaría obtener los encabezados de respuesta reales de la solicitud de página original sin emitir otro.

Para solicitudes AJAX:

Si se realiza una solicitud HTTP a través de AJAX, es posible obtener los encabezados de respuesta con el getAllResponseHeaders()método. Es parte de la API XMLHttpRequest. Para ver cómo se puede aplicar esto, consulte la fetchSimilarHeaders()función a continuación. Tenga en cuenta que esta es una solución al problema que no será confiable para algunas aplicaciones.

myXMLHttpRequest.getAllResponseHeaders();

• La API se especificó en la siguiente recomendación de candidato para XMLHttpRequest: XMLHttpRequest - Recomendación del candidato del W3C 3 de agosto de 2010

• Específicamente, el getAllResponseHeaders()método se especificó en la siguiente sección: w3.org XMLHttpRequest:: el getallresponseheaders()método

• La documentación MDN es buena, también: developer.mozilla.org:XMLHttpRequest .

Esto no le dará información sobre los encabezados de respuesta HTTP de la solicitud de página original, pero podría usarse para hacer conjeturas informadas sobre cuáles eran esos encabezados. Más sobre eso se describe a continuación.

Obtención de valores de encabezado de la solicitud de página inicial:

Esta pregunta se hizo por primera vez hace varios años, preguntando específicamente cómo llegar a los encabezados de respuesta HTTP originales para la página actual (es decir, la misma página dentro de la cual se estaba ejecutando JavaScript). Esta es una pregunta bastante diferente que simplemente obtener los encabezados de respuesta para cualquier solicitud HTTP. Para la solicitud de página inicial, los encabezados no están disponibles para javascript. Si los valores de encabezado que necesita serán confiables y suficientemente consistentes si solicita la misma página nuevamente a través de AJAX, dependerá de su aplicación particular.

Las siguientes son algunas sugerencias para solucionar ese problema.

1. Solicitudes de recursos que son en gran medida estáticos

Si la respuesta es en gran medida estática y no se espera que los encabezados cambien mucho entre solicitudes, puede hacer una solicitud AJAX para la misma página en la que se encuentra actualmente y asumir que son los mismos valores que formaron parte de la página. Respuesta HTTP Esto podría permitirle acceder a los encabezados que necesita utilizando la agradable API XMLHttpRequest descrita anteriormente.

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

Este enfoque será problemático si realmente tiene que confiar en que los valores sean consistentes entre las solicitudes, ya que no puede garantizar completamente que sean los mismos. Dependerá de su aplicación específica y de si sabe que el valor que necesita es algo que no cambiará de una solicitud a la siguiente.

2. Hacer inferencias

Hay algunas propiedades de la lista de materiales (modelo de objetos del navegador) que el navegador determina al observar los encabezados. Algunas de estas propiedades reflejan los encabezados HTTP directamente (por ejemplo, navigator.userAgentse establece en el valor del User-Agentcampo del encabezado HTTP ). Al rastrear las propiedades disponibles, es posible que pueda encontrar lo que necesita o algunas pistas para indicar qué contenía la respuesta HTTP.

3. Guardarlos

Si controla el lado del servidor, puede acceder a cualquier encabezado que desee mientras construye la respuesta completa. Los valores se pueden pasar al cliente con la página, escondidos en algún marcado o tal vez en una estructura JSON en línea. Si desea tener todos los encabezados de solicitud HTTP disponibles para su javascript, puede iterar a través de ellos en el servidor y enviarlos de regreso como valores ocultos en el marcado. Probablemente no sea ideal enviar valores de encabezado de esta manera, pero ciertamente podría hacerlo por el valor específico que necesita. Podría decirse que esta solución también es ineficiente, pero que haría el trabajo si la necesitara.

Utilizando XmlHttpRequestpuede abrir la página actual y luego examinar los encabezados http de la respuesta.

El mejor caso es simplemente hacer una HEADsolicitud y luego examinar los encabezados.

Para ver algunos ejemplos de cómo hacerlo, visite http://www.jibbering.com/2002/4/httprequest.html

Solo mis 2 centavos.

Una solución con Service Workers

Los trabajadores del servicio pueden acceder a la información de la red, que incluye encabezados. Lo bueno es que funciona en cualquier tipo de solicitud, no solo en XMLHttpRequest.

Cómo funciona:

1. Agregue un trabajador de servicio en su sitio web.
2. Mire cada solicitud que se envía.
3. Haga que el trabajador del servicio fetchsolicite la respondWithfunción.
4. Cuando llegue la respuesta, lea los encabezados.
5. Envíe los encabezados del trabajador de servicio a la página con la postMessagefunción.

Ejemplo de trabajo:

Los trabajadores de servicio son un poco complicados de entender, así que he construido una pequeña biblioteca que hace todo esto. Está disponible en github: https://github.com/gmetais/sw-get-headers .

Limitaciones:

• el sitio web debe estar en HTTPS
• el navegador debe ser compatible con la API de Service Workers
• las políticas del mismo dominio / dominio cruzado están en acción, al igual que en XMLHttpRequest

Para aquellos que buscan una forma de analizar todos los encabezados HTTP en un objeto al que se puede acceder como un diccionario headers["content-type"], he creado una función 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"]

Otra forma de enviar información de encabezado a JavaScript sería a través de cookies. El servidor puede extraer los datos que necesita de los encabezados de solicitud y enviarlos nuevamente dentro de un Set-Cookieencabezado de respuesta, y las cookies se pueden leer en JavaScript. Sin embargo, como dice keparo, es mejor hacer esto solo para uno o dos encabezados, en lugar de hacerlo para todos.

Si estamos hablando de Solicitud de cabeceras, puede crear sus propias cabeceras cuando se hace XmlHttpRequests.

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

No puede acceder a los encabezados http, pero parte de la información provista en ellos está disponible en el DOM. Por ejemplo, si desea ver el http referer (sic), use document.referrer. Puede haber otros como este para otros encabezados http. Intenta buscar en Google lo específico que deseas, como "http referer javascript".

Sé que esto debería ser obvio, pero seguí buscando cosas como "http encabezados javascript" cuando todo lo que realmente quería era el árbitro, y no obtuve ningún resultado útil. No sé cómo no me di cuenta de que podía hacer una consulta más específica.

Como muchas personas, he estado cavando la red sin una respuesta real :(

Sin embargo, he descubierto un bypass que podría ayudar a otros. En mi caso, controlo completamente mi servidor web. De hecho, es parte de mi aplicación (ver referencia final). Es fácil para mí agregar un script a mi respuesta http. Modifiqué mi servidor httpd para inyectar un pequeño script en cada página html. Solo empujo una línea adicional 'js script' justo después de la construcción de mi encabezado, que establece una variable existente de mi documento dentro de mi navegador [elijo la ubicación], pero cualquier otra opción es posible. Si bien mi servidor está escrito en nodejs, no tengo dudas de que se puede usar la misma técnica desde PHP u otros.

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

Ahora todas las páginas html cargadas desde mi servidor, tienen este script ejecutado por el navegador en la recepción. Entonces puedo verificar fácilmente desde JavaScript si la variable existe o no. En mi caso de uso, necesito saber si debo usar el perfil JSON o JSON-P para evitar el problema CORS, pero la misma técnica se puede usar para otros fines [es decir: elegir entre el servidor de desarrollo / producción, obtener del servidor un REST / API llave, etc ....]

En el navegador solo necesita verificar la variable directamente desde JavaScript como en mi ejemplo, donde lo uso para seleccionar mi 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 quien quiera revisar mi código: https://www.npmjs.org/package/gpsdtracking

Usando mootools, puede usar this.xhr.getAllResponseHeaders ()

Acabo de probar, y esto funciona para mí usando Chrome Versión 28.0.1500.95.

Necesitaba descargar un archivo y leer el nombre del archivo. El nombre del archivo está en el encabezado, así que hice lo siguiente:

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

    }
};

Salida:

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 es mi script para obtener todos los encabezados de respuesta:

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

Teniendo como resultado los encabezados de respuesta.

Esta es una prueba de comparación usando Hurl.it:

Para obtener los encabezados como un objeto que es más útil (mejora de la respuesta 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);

El enlace de Allain Lalonde me alegró el día. Solo agrego un código html de trabajo simple aquí.
Funciona con cualquier navegador razonable desde hace años más IE9 + y 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: Obtiene encabezados de una segunda solicitud, el resultado puede diferir de la solicitud 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 es una vieja pregunta. No está seguro de que el apoyo se hizo más amplia, pero getAllResponseHeaders()y getResponseHeader()parece ser ahora bastante estándar: http://www.w3schools.com/xml/dom_http.asp

Como ya se mencionó, si controla el lado del servidor, entonces debería ser posible enviar los encabezados de solicitud iniciales al cliente en la respuesta inicial.

En Express, por ejemplo, lo siguiente funciona:

app.get('/somepage', (req, res) => { res.render('somepage.hbs', {headers: req.headers}); }) Los encabezados están disponibles dentro de la plantilla, por lo que podrían ocultarse visualmente pero incluirse en el marcado y leerse en el JavaScript del lado del cliente.

Creo que la pregunta fue incorrecta, si desea tomar el encabezado Solicitud de JQuery / JavaScript, la respuesta es simplemente No. Las otras soluciones son crear una página aspx o una página jsp, entonces podemos acceder fácilmente al encabezado de solicitud. Tome toda la solicitud en la página aspx y colóquela en una sesión / cookies, luego puede acceder a las cookies en la página JavaScript.