web-dev-qa-db-fra.com

Lecture des en-têtes de réponse avec l'API Fetch

Je suis dans une extension Google Chrome avec des autorisations pour "*://*/*" et j'essaie de passer de XMLHttpRequest à l'API Fetch .

L'extension stocke les données de connexion entrées par l'utilisateur qui étaient auparavant entrées directement dans l'appel open () du processus XHR pour HTTP Auth, mais sous Fetch ne peuvent plus être utilisées directement en tant que paramètre. Pour HTTP Basic Auth, il est facile de contourner cette limitation, car vous pouvez définir manuellement un en-tête d'autorisation:

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

HTTP Digest Auth nécessite toutefois plus d'interactivité. vous devez lire les paramètres que le serveur vous envoie avec sa réponse 401 pour créer un jeton d'autorisation valide. J'ai essayé de lire le champ d'en-tête de réponse WWW-Authenticate avec cet extrait:

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

Mais tout ce que je reçois est cette sortie:

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

Ce qui en soi est correct, mais il manque encore environ 6 champs supplémentaires selon les outils de développement de Chrome. Si j'utilise resp.headers.get("WWW-Authenticate") (ou n'importe lequel des autres champs), je ne reçois que null.

Avez-vous une chance d'accéder à ces autres champs en utilisant l'API Fetch?

javascriptgoogle-chrome-extension
29
jules

Il existe une restriction pour accéder aux en-têtes de réponse lorsque vous utilisez Fetch API over 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 , vous ne pouvez donc 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

37
Rajbir Jawanda

De MDN

Vous pouvez également obtenir tous les en-têtes en accédant aux entrées Iterator.

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

Aussi, gardez à l'esprit this part:

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 incluent les noms d'en-tête interdits et les noms d'en-tête de réponse interdits.

6
Potecaru Tudor

Pour assurer la compatibilité ascendante avec les navigateurs qui ne prennent pas en charge les itérateurs ES2015 (et ont probablement aussi besoin de polyfill fetch/Promise), la fonction Headers.forEach est la meilleure option:

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

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

1
Jørn Andre Sundt