web-dev-qa-db-fra.com

Angularjs émet $ http.get ne fonctionne pas

Je suis novice chez Angularjs et j'ai essayé de suivre l'exemple donné pour $ http.get sur la documentation du site Web angularjs.

J'ai un service REST qui, lorsqu'il est appelé, renvoie les données comme suit: 

http://abc.com:8080/Files/REST/v1/list?&filter=FILE


 {
  "files": [
    {
      "filename": "a.json",
      "type": "json",
      "uploaded_ts": "20130321"
    },
    {
      "filename": "b.xml",
      "type": "xml",
      "uploaded_ts": "20130321"
    }       
  ],  
 "num_files": 2}

Une partie du contenu de mon fichier index.html se présente comme suit:

<div class="span6" ng-controller="FetchCtrl">
    <form class="form-horizontal">
        <button class="btn btn-success btn-large" ng-click="fetch()">Search</button>
    </form>
      <h2>File Names</h2>
      <pre>http status code: {{status}}</pre>
     <div ng-repeat="file in data.files">
      <pre>Filename: {{file.filename}}</pre>
    </div>

Et mon fichier js ressemble à ceci:

function FetchCtrl($scope, $http, $templateCache) {
  $scope.method = 'GET'; $scope.url = 'http://abc.com:8080/Files/REST/v1/list?&filter=FILE'; 
  $scope.fetch = function() {
    $scope.code = null;
    $scope.response = null;

    $http({method: $scope.method, url: $scope.url, cache: $templateCache}).
      success(function(data, status) {
        $scope.status = status;
        $scope.data = data;
      }).
      error(function(data, status) {
        $scope.data = data || "Request failed";
        $scope.status = status;
    });
  };      
}

Mais quand je lance ceci, je ne vois aucun résultat pour les noms de fichiers et je vois le code de statut http = 0

Quand je cours, 

http://abc.com:8080/Files/REST/v1/list?&filter=FILE
dans le navigateur, je peux toujours voir les résultats souhaités (comme mentionné ci-dessus)

J'ai même essayé de déboguer en utilisant Firebug dans Firefox, je vois que l'URL ci-dessus est invoquée lorsque je clique sur le bouton "Rechercher" mais la réponse semble être vide. Et curieusement, dans Firebug sous URL, cela montre 

 OPTIONS "URL ci-dessus"

au lieu de 

 OBTENIR "URL ci-dessus"

Pouvez-vous s'il vous plaît laissez-moi savoir, ce que je fais mal et pourquoi je ne suis pas en mesure d'accéder aux données JSON?

Merci,

jsonhttprestgetangularjs
20
SL101

Cela est dû au fait que les demandes CORS sont traitées de manière angulaire (demandes HTTP intersite). Angular ajoute quelques en-têtes HTTP supplémentaires par défaut, raison pour laquelle vous voyez une demande OPTIONS au lieu de GET. Essayez de supprimer X-Requested-With en-tête HTTP en ajoutant cette ligne de code:

delete $http.defaults.headers.common['X-Requested-With'];

En ce qui concerne CORS, ce qui suit est mentionné sur Réseau de développeurs Mozilla :

La norme de partage des ressources d'origine croisée fonctionne en ajoutant un nouveau HTTP en-têtes qui permettent aux serveurs de décrire l'ensemble des origines qui sont autorisé à lire ces informations à l’aide d’un navigateur Web.

19
Aziz Shaikh

J'ai eu le problème en utilisant $ resource, qui utilise également $ http.

J'ai remarqué que lorsque j'utilisais AngularJS 1.0.6, la requête n'apparaissait même pas dans Firebug, mais qu'en utilisant AngularJS 1.1.4, Firebug montrait la requête GET et la réponse 200 OK ainsi que les en-têtes appropriés, mais une réponse vide. En fait, les en-têtes indiquaient également que les données revenaient, comme le montre l'en-tête "Content-Length" avec la longueur de contenu correcte, et en le comparant à un plugin client REST que j'utilisais et qui récupérait correctement les données. .

Après avoir été encore plus méfiant, j'ai décidé d'essayer un autre navigateur. J'avais initialement utilisé Firefox 16.0.1 (et également essayé 20.0.1), mais lorsque j'ai essayé IE 9 (et AngularJS 1.1.4), le code fonctionnait correctement, sans aucun problème.

J'espère que cela vous aidera à trouver une solution de contournement. Dans mon cas, j'ai remarqué que je n'avais jamais eu ce problème avec les URL relatives. Je modifie donc mon application pour que l'application et l'API soient toutes deux servies sur le même port. Cela pourrait potentiellement être un bogue AngularJS.

3
reedog117

J'ai eu le même problème aujourd'hui avec Firefox. IE a bien fonctionné. Au début, je ne pensais pas que cors c’était parce que, comme vous, je n’ai pas eu d’erreurs dans la console et le statut 0 dans la méthode des erreurs est angulaire. Dans la console Firefox, je recevais une réponse 200 dans mes en-têtes et une longueur de contenu, mais aucun message de réponse. Firefox avait l'habitude de vous avertir à propos de la création de scripts intersites qui vous dirigerait dans la bonne direction ... J'ai résolu le problème en configurant cors sur mon api. C’est vraiment le meilleur moyen d’aller . Si vous n’utilisez que GET avec votre API, vous pouvez également essayer d’utiliser jsonp. consommant.

$http.jsonp('http://yourapi.com/someurl')
    .success(function (data, status, headers, config) {
        alert("Hooray!");
    })
    .error(function (data, status, headers, config) {
        alert("Dang It!");
    });
2
Scott

C'est une protection de script entre sites . Essayez de démarrer Google Chrome avec --disbable-web-security (via la ligne de commande) . Si cela ne fonctionne pas, essayez également de placer votre contenu angulaire sur un serveur http d'utiliser le protocole de fichier. (Astuce: utilisez chrome canary si vous voulez avoir un navigateur dédié à --disable-web-security - vous devrez bien sûr également définir l’argument de la ligne de commande, mais les deux versions de Chrome fonctionnent simultanément). Pour la publication, vous devez définir des en-têtes http sur le serveur fournissant le composant AngularJS afin de permettre l'accès à l'API Twitter ou à tout autre élément que vous souhaitez appeler.

0
Dodekeract