Angularjs wydaje $ http.get nie działa

Question

Jestem nowicjuszem dla Angularjs i starałem się podążać za przykładem podanym dla $ http.get na dokumentacji witryny angularjs.

Mam usługi REST, która przy wywołaniu zwraca dane w następujący sposób:

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} 

Część zawartość mojego pliku index.html wygląda następująco:

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

i mój js plik wygląda następująco:

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

Ale kiedy to uruchomię, nie widzę żadnego wyniku dla nazw plików i ja patrz kod stanu HTTP = 0

Kiedy biegnę,

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

w przeglądarce, nadal można zobaczyć pożądanych rezultatów (jak wspomniano powyżej)

Próbowałem nawet debugować za pomocą Firebug Firefox, widzę powyżej URL zostanie wywołany kiedy kliknę przycisk "Szukaj", ale odpowiedź wygląda na pustą. I co ciekawe w Firebug pod adresem URL, to pokazuje

 
    OPTIONS "Above URL" 

zamiast

 
    GET "Above URL" 

Czy możesz dać mi znać, co robię źle i dlaczego nie jestem w stanie uzyskać dostęp do danych JSON?

Dzięki,

Answer 1

To dlatego, jak kanciasty traktuje Cors wnioski (prośby Cross-site HTTP). Angular dodaje domyślnie kilka dodatkowych nagłówków HTTP, dlatego właśnie widzisz żądanie OPTIONS zamiast GET. Spróbuj usunąć X-Requested-With nagłówek HTTP dodając ten wiersz kodu:

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

Regarding CORS po wspomniano na Mozilla Developer Network:

The Cross-Origin Resource Sharing standardowe prace dodając nowe HTTP nagłówków, które umożliwiają serwery, aby opisać zbiór początków, które są dozwolone do odczytania tych informacji za pomocą przeglądarki internetowej.

Answer 2

Mam problem z wykorzystaniem $ resource, który również używa $ http.

Zauważyłem, że gdy użyłem AngularJS 1.0.6, żądanie nie pojawi się nawet w Firebug, ale gdy użyję Firebug AngularJS 1.1.4, pokaże żądanie GET i 200 OK, jak również poprawne nagłówki, ale pusta odpowiedź. W rzeczywistości nagłówki pokazały również, że dane wracają, jak pokazuje nagłówek "Długość treści" mający prawidłową długość treści i porównując to z wtyczką klienta REST, której używałem, która pomyślnie odzyskała dane.

Po jeszcze większej podejrzliwości postanowiłem wypróbować inną przeglądarkę. Początkowo korzystałem z Firefoksa 16.0.1 (i wypróbowałem także wersję 20.0.1), ale kiedy wypróbowałem IE 9 (i AngularJS 1.1.4), kod działał poprawnie bez żadnych problemów.

Mam nadzieję, że pomoże to znaleźć obejście problemu.W moim przypadku zauważyłem, że nigdy nie miałem problemu z względnymi adresami URL, więc zmieniam aplikację, aby zarówno aplikacja, jak i interfejs API były wyświetlane na tym samym porcie. Może to potencjalnie być błędem AngularJS.

Answer 3

Jest to ochrona cross-site-scripting. Spróbuj uruchomić google chrome z opcją --disbable-web-security (przez linię poleceń). Jeśli to nie działa, spróbuj umieścić swoje kanciaste rzeczy w serwerze http, zamiast korzystać z protokołu plików. (Wskazówka: użyj chrome canary, jeśli chcesz mieć przeglądarkę dedykowaną do --disable-web-security - oczywiście musisz też ustawić argument wiersza poleceń, ale obie wersje chrome działają jednocześnie). W celu wydania musisz ustawić kilka nagłówków HTTP na serwerze, dostarczając AngularJS-stuff, aby umożliwić dostęp do apiksza Twittera lub cokolwiek chcesz zadzwonić.

Answer 4

Miałem ten sam problem dzisiaj z firefox. IE działało dobrze. Na początku nie sądziłem, że to był cors, bo podobnie jak ty nie mam błędów w konsoli i otrzymałem status 0 z powrotem w metodzie błędu w kanciastym. W konsoli firefox uzyskałem odpowiedź zwrotną w nagłówkach i długość treści, ale brak komunikatu odpowiedzi. Firefox ostrzegał przed skryptami cross site, które wskazywałyby Ci właściwy kierunek. Rozwiązałem problem, konfigurując cors na moim interfejsie API. To naprawdę najlepsza droga. Jeśli używasz GET tylko z api możesz również spróbować użyć jsonp, który jest wbudowany w kąt i jest to praca dla cors, gdy nie kontrolujesz api, które zużywasz.

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