web-dev-qa-db-fra.com

Comment lire les en-têtes de réponse dans angularjs?

Mon serveur renvoie ce type d’en-tête: Content-Range:0-10/0:

enter image description here

J'ai essayé de lire cet en-tête angulaire sans succès: 

var promise = $http.get(url, {
    params: query
}).then(function(response) {
  console.log(response.headers());
  return response.data;
});

qui imprime juste 

Object {content-type: "application/json; charset=utf-8"}

Des idées comment accéder à l'en-tête de la plage de contenu?

javascriptangularjsangular-http
29
Artjom Zabelin

Utilisez la variable headers dans les rappels de succès et d’erreur

À partir de la documentation .

$http.get('/someUrl').
  success(function(data, status, headers, config) {
    // this callback will be called asynchronously
    // when the response is available
  })
  .error(function(data, status, headers, config) {
    // called asynchronously if an error occurs
    // or server returns response with an error status.
  });

Si vous êtes sur le même domaine, vous devriez pouvoir récupérer les en-têtes de réponse. Si vous utilisez plusieurs domaines, vous devrez ajouter Access-Control-Expose-Headers header sur le serveur.

Access-Control-Expose-Headers: content-type, cache, ...
38
Muhammad Reda

Pourquoi ne pas simplement essayer ceci:

var promise = $http.get(url, {
    params: query
}).then(function(response) {
  console.log('Content-Range: ' + response.headers('Content-Range'));
  return response.data;
});

Surtout si vous voulez renvoyer la promise afin que cela puisse faire partie d'une chaîne de promesses.

29
Eugene Retunsky

Mis à jour sur la base de la réponse de Mohammed ...

$http.get('/someUrl').
  success(function(data, status, headers, config) {
    // this callback will be called asynchronously
    // when the response is available
    console.log(headers()['Content-Range']);
  })
  .error(function(data, status, headers, config) {
    // called asynchronously if an error occurs
    // or server returns response with an error status.
  });
9
medoix

En plus de la réponse d'Eugene Retunsky, citant from $ http documentation concernant la réponse:

L'objet de réponse a les propriétés suivantes:

  • data - {string|Object} - Le corps de la réponse transformé avec les fonctions de transformation.

  • status - {number} - Code d'état HTTP de la réponse.

  • headers - {function([headerName])} - Fonction de lecture d'en-tête.

  • config - {Object} - L'objet de configuration utilisé pour générer la demande.

  • statusText - {string} - Texte d'état HTTP de la réponse.

Veuillez noter que l'argument callback order pour $ resource (v1.6) n'est pas le même que ci-dessus:

Le rappel de réussite est appelé avec les arguments (value (Object|Array), responseHeaders (Function), status (number), statusText (string)), où la valeur est l'instance de ressource remplie ou l'objet de collection. Le rappel d'erreur est appelé avec l'argument (httpResponse).

6
Wtower

Les en-têtes de réponse en cas de cors restent cachés . Vous devez ajouter des en-têtes de réponse pour indiquer à Angular d'exposer les en-têtes à JavaScript.

// From server response headers :
header("Access-Control-Allow-Methods: GET, POST, OPTIONS");
header("Access-Control-Allow-Headers: Origin, X-Requested-With, 
Content-Type, Accept, Authorization, X-Custom-header");
header("Access-Control-Expose-Headers: X-Custom-header");
header("X-Custom-header: $some data");

var data = res.headers.get('X-Custom-header');

Source: https://github.com/angular/angular/issues/5237

1
kuabhina1702

Selon les en-têtes personnalisés MDN ne sont pas exposés par défaut. L'administrateur du serveur doit les exposer à l'aide des "en-têtes de contrôle d'accès" de la même manière que pour "accès-contrôle-autoriser-origine"

Voir ce lien MDN pour confirmation [ https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Access-Control-Expose-Headers]

0
cnngraphics