it-swarm.com.de

Angularjs gibt $ http.get nicht aus

Ich bin ein Anfänger von Angularjs und habe versucht, dem Beispiel zu folgen, das für $ http.get auf der Website-Dokumentation von anglejs angegeben ist.

Ich habe einen REST - Dienst, der beim Aufruf Daten wie folgt zurückgibt: 

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}

Ein Teil des Inhalts meiner index.html-Datei sieht wie folgt aus:

<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>

Und meine js-Datei sieht folgendermaßen aus:

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;
    });
  };      
}

Aber wenn ich das ausführen, sehe ich kein Ergebnis für Dateinamen und ich sehe http status code = 0

Wenn ich renne, 

http://abc.com:8080/Files/REST/v1/list?&filter=FILE
im Browser kann ich immer noch die gewünschten Ergebnisse sehen (wie oben erwähnt)

Ich habe sogar versucht, mit Firebug in Firefox zu debuggen. Ich sehe, dass die oben genannte URL aufgerufen wird, wenn ich auf "Suchen" klicke. Und interessanterweise in Firebug unter URL, zeigt es 

 OPTIONEN "Über URL" 

anstatt 

 GET "Über URL" 

Können Sie mir bitte mitteilen, was ich falsch mache und warum ich nicht auf JSON-Daten zugreifen kann?

Vielen Dank,

20
SL101

Dies ist darauf zurückzuführen, dass Winkel CORS-Anforderungen (standortübergreifende HTTP-Anforderungen) behandelt. Angular fügt standardmäßig einige zusätzliche HTTP-Header hinzu, weshalb die OPTIONS-Anforderung anstelle von GET angezeigt wird. Entfernen Sie den X-Requested-With-HTTP-Header, indem Sie folgende Codezeile hinzufügen:

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

In Bezug auf CORS wird im Mozilla Developer Network Folgendes erwähnt:

Der Cross-Origin-Standard für die gemeinsame Nutzung von Ressourcen funktioniert durch Hinzufügen von neuem HTTP Kopfzeilen, die es Servern ermöglichen, die Ursprungsmenge zu beschreiben, die .__ ist. diese Informationen mit einem Webbrowser lesen dürfen.

19
Aziz Shaikh

Ich habe das Problem mit $ resource, das auch $ http verwendet.

Ich bemerkte, dass bei der Verwendung von AngularJS 1.0.6 die Anforderung nicht einmal in Firebug angezeigt wurde. Bei Verwendung von AngularJS 1.1.4 zeigte Firebug jedoch die GET-Anfrage und die 200 OK-Antwort sowie die richtigen Header, aber eine leere Antwort. Tatsächlich zeigten die Header auch, dass die Daten zurückkehrten, wie der "Content-Length" -Header mit der korrekten Inhaltslänge zeigte. Dies wurde mit einem REST Client-Plugin verglichen, das ich verwendete und das die Daten erfolgreich abruft .

Nachdem ich noch weiter misstrauisch war, entschied ich mich, einen anderen Browser auszuprobieren. Ich hatte ursprünglich Firefox 16.0.1 verwendet (und auch 20.0.1 versucht), aber als ich IE 9 (und AngularJS 1.1.4) ausprobierte, funktionierte der Code ohne Probleme.

Hoffentlich hilft Ihnen das dabei, eine Problemumgehung zu finden. In meinem Fall habe ich festgestellt, dass dieses Problem bei relativen URLs noch nicht aufgetreten ist. Ich ändere daher meine App, sodass sowohl die App als auch die API am selben Port bereitgestellt werden. Dies könnte möglicherweise ein AngularJS-Fehler sein.

3
reedog117

Ich hatte heute das gleiche Problem mit Firefox. IE hat gut funktioniert. Ich dachte nicht, dass es zuerst Kors war, weil ich wie Sie keine Fehler in der Konsole und den Status 0 in meiner Fehlermethode in eckig hatte. In der Firefox-Konsole erhielt ich eine 200-Antwort in meinen Kopfzeilen und eine Inhaltslänge, aber keine eigentliche Antwortnachricht. Früher hat Firefox eine Warnung über Cross Site Scripting ausgegeben, die Sie in die richtige Richtung weisen würde ... Ich habe das Problem gelöst, indem Sie Kors auf meiner API eingerichtet haben. Dies ist wirklich der beste Weg, um zu gehen ... Wenn Sie nur GET mit Ihrer API verwenden, können Sie auch Jsonp verwenden, da dies direkt in eckig eingebaut ist verbrauchend.

$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

Es ist ein Cross-Site-Scripting-Schutz . Versuchen Sie, google chrome mit --disbable-web-security (über die Befehlszeile) zu starten .____ Wenn dies nicht funktioniert, versuchen Sie stattdessen, Ihren Winkel auf einem http-Server abzulegen Verwendung des Dateiprotokolls. (Tipp: Verwenden Sie Chrome Canary, wenn Sie einen Browser für --disable-web-security haben möchten. Natürlich müssen Sie auch das Befehlszeilenargument festlegen, aber beide Chrome-Versionen laufen gleichzeitig). Zur Veröffentlichung müssen Sie einige http-Header auf dem Server einrichten, die AngularJS-Dateien bereitstellen, um Zugriff auf die Twitter-API oder auf das, was Sie anrufen möchten, zuzulassen.

0
Dodekeract