javascript - w3schools - Lectura de encabezados de respuesta con Fetch API

json fetch javascript

Question

Estoy en una extensión de Google Chrome con permisos para "*://*/*" y estoy tratando de cambiar de XMLHttpRequest a Fetch API .

La extensión almacena los datos de inicio de sesión ingresados ​​por el usuario que solían colocarse directamente en la llamada abierta () de XHR para HTTP Auth, pero en Fetch ya no se pueden usar directamente como parámetro. Para la autenticación básica HTTP, eludir esta limitación es trivial, ya que puede establecer manualmente un encabezado de autorización:

fetch(url, {
  headers: new Headers({ ''Authorization'': ''Basic '' + btoa(login + '':'' + pass) })
  } });

Sin embargo, HTTP Digest Auth requiere más interactividad; debe leer los parámetros que el servidor le envía con su respuesta 401 para crear un token de autorización válido. Intenté leer el campo de encabezado de respuesta WWW-Authenticate con este fragmento:

fetch(url).then(function(resp) {
  resp.headers.forEach(function(val, key) { console.log(key + '' -> '' + val); });
}

Pero todo lo que obtengo es esta salida:

content-type -> text/html; charset=iso-8859-1

Lo que en sí mismo es correcto, pero todavía faltan alrededor de 6 campos más de acuerdo con las Herramientas para desarrolladores de Chrome. Si uso resp.headers.get("WWW-Authenticate") (o cualquiera de los otros campos), solo obtengo un null .

¿Alguna posibilidad de llegar a esos otros campos utilizando la API Fetch?

Answer 1

De MDN

También puede obtener todos los encabezados accediendo a las entradas Iterator.

// Display the key/value pairs
for (var pair of res.headers.entries()) {
   console.log(pair[0]+ '': ''+ pair[1]);
}

Además, tenga en cuenta this parte:

Por razones de seguridad, algunos encabezados solo pueden ser controlados por el agente de usuario. Estos encabezados incluyen los nombres de encabezado prohibidos y los nombres de encabezado de respuesta prohibidos.

Answer 2

Existe una restricción para acceder a los encabezados de respuesta cuando está utilizando Fetch API sobre CORS. Debido a esta restricción, solo puede acceder a los siguientes encabezados estándar:

• Cache-Control
• Content-Language
• Content-Type
• Expires
• Last-Modified
• Pragma

Cuando escribe código para la extensión Google Chrome, está utilizando CORS , por lo tanto, no puede acceder a todos los encabezados. Si controla el servidor, puede devolver información personalizada en el body respuesta en lugar de headers

Más información sobre esta restricción: https://developers.google.com/web/updates/2015/03/introduction-to-fetch#response_types

Answer 3

Para la compatibilidad con navegadores que no son compatibles con los iteradores ES2015 (y que probablemente también necesiten recuperar / Promover polyfills), la función Headers.forEach es la mejor opción:

r.headers.forEach(function(value, name) {
    console(name + ": " + value);
});

Probado en IE11 con Bluebird como Promise polyfill y whatwg-fetch como fetch polyfill. Headers.entries (), Headers.keys () y Headers.values ​​() no funcionan.