Lire les en-têtes de réponse avec l'API Fetch

Question

Je suis dans une extension de Google Chrome avec des permissions pour "*://*/*" et j'essaie de passer de XMLHttpRequest à l'option API de récupération .

L'extension stocke les données de connexion saisies par l'utilisateur, qui étaient auparavant placées directement dans l'appel open() du XHR pour HTTP Auth, mais qui, dans le cadre de Fetch, ne peuvent plus être utilisées directement comme paramètre. Pour HTTP Basic Auth, contourner cette limitation est trivial, car vous pouvez définir manuellement un en-tête Authorization :

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

Authentification HTTP Digest nécessite toutefois plus d'interactivité ; vous devez lire les paramètres que le serveur vous envoie avec sa réponse 401 pour élaborer un jeton d'autorisation valide. J'ai essayé de lire le WWW-Authenticate avec cet extrait de texte :

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

Mais tout ce que j'obtiens est cette sortie :

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

Ce qui en soi est correct, mais il manque encore environ 6 autres champs selon les outils de développement de Chrome. Si j'utilise resp.headers.get("WWW-Authenticate") (ou tout autre champ d'ailleurs), j'obtiens seulement null .

Est-il possible d'accéder à ces autres champs en utilisant l'API Fetch ?

Answer 1

L'accès aux en-têtes de réponse est limité lorsque vous utilisez l'API Fetch via CORS. En raison de cette restriction, vous ne pouvez accéder qu'aux en-têtes standard suivants :

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

Lorsque vous écrivez du code pour l'extension Google Chrome, vous utilisez CORS et donc vous ne pouvez pas accéder à tous les en-têtes. Si vous contrôlez le serveur, vous pouvez renvoyer des informations personnalisées dans la réponse. body au lieu de headers

Plus d'informations sur cette restriction - https://developers.google.com/web/updates/2015/03/introduction-to-fetch#response_types

Answer 2

De MDN

Vous pouvez également obtenir tous les en-têtes en accédant à l'Iterator des entrées.

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

Gardez également à l'esprit ce partie :

Pour des raisons de sécurité, certains en-têtes ne peuvent être contrôlés que par l'agent utilisateur. Ces en-têtes comprennent les noms d'en-tête interdits et les noms d'en-tête de réponse interdits.

Answer 3

Pour des raisons de rétrocompatibilité avec les navigateurs qui ne prennent pas en charge les itérateurs ES2015 (et qui ont probablement besoin de polyfills fetch/Promise), la fonction En-têtes.forEach est la meilleure option :

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

Testé dans IE11 avec Bluebird comme polyfill Promise et whatwg-fetch comme polyfill fetch. Headers.entries(), Headers.keys() et Headers.values() ne fonctionnent pas.