Angularjs issue $ http.get不能正常工作

我是Angularjs的新手，並試圖遵循在httpjget上給出的有關angularjs網站文檔的示例。

我有一個REST服務，該服務調用的返回數據時，如下所示：

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}

我index.html文件的部分內容看起來如下：

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

而我的JS文件看起來如下：

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

但是，當我運行這個，我看不到任何文件名的結果，我見HTTP狀態代碼= 0

當我運行，

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

在瀏覽器中，我仍然可以看到所希望的結果（如上所述）

我甚至試圖在Firefox使用螢火蟲調試，我看到上述URL被調用當我點擊「搜索」按鈕但響應看起來是空的。有趣的是在URL下的螢火蟲，它顯示

 
    OPTIONS "Above URL"

代替

 
    GET "Above URL"

能否請您讓我知道，我在做什麼錯的，爲什麼我不能夠訪問JSON數據？

感謝，

來源

2013-03-21 SagarL

嘿，我知道這已經有一段時間了，但是你有沒有深究過這個問題的底部？接受的答案在Firefox或Chrome中不適用於我。它仍然在調用OPTIONS。 – tbogatchev 2015-03-16 20:53:43

這是因爲如何對待角CORS請求（跨站HTTP請求）。 Angular默認添加了一些額外的HTTP標頭，這就是爲什麼你看到OPTIONS請求而不是GET。通過添加新的HTTP 頭，讓

的跨來源資源共享的標準作品：嘗試通過加入這一行的代碼刪除X-Requested-With HTTP標頭：
delete $http.defaults.headers.common['X-Requested-With']; 
關於CORS，以下是對Mozilla Developer Network提到服務器來描述允許使用網絡瀏覽器讀取該信息的一組起始點。

來源

2013-03-21 08:25:54

它在Firebug中的部分工作意義從angular.min.js中刪除

 "X-Requested-With":"XMLHttpRequest"

後，我可以看到'GET'URL''（請讓我知道這是否正確）。但我仍然無法在html頁面中獲得任何迴應。不確定，如果我做錯了什麼。 – SagarL 2013-03-22 07:13:27

你現在得到什麼狀態碼？ – 2013-03-22 07:37:22

當我通過Firebug進行檢查時，我得到的狀態代碼爲'200 OK'，但沒有在響應中顯示。但是當我剛剛運行REST調用時，我確實以正確的響應將狀態代碼設置爲「200 OK」。 – SagarL 2013-03-22 19:33:23

我一直在使用$ resource，它也使用$ http的問題。

我注意到，當我使用AngularJS 1.0.6時，請求甚至不會顯示在Firebug中，但是當使用AngularJS 1.1.4時，Firebug會顯示GET請求和200 OK響應以及正確的標題，但一個空的迴應。實際上，標題還顯示數據已返回，正如內容長度正確的「Content-Length」標題所示，並將其與我正在使用的REST客戶端插件進行比較，該插件正在成功檢索數據。

在進一步懷疑之後，我決定嘗試使用不同的瀏覽器。我原本使用Firefox 16.0.1（也嘗試過20.0.1），但是當我嘗試IE 9（和AngularJS 1.1.4）時，代碼運行正常，完全沒有問題。

希望這可以幫助您找到解決方法。在我的情況下，我注意到我從來沒有相對URL的這個問題，所以我改變我的應用程序，使應用程序和API都在同一端口。這可能是一個AngularJS錯誤。

來源

2013-04-26 16:51:01 reedog117

它是跨站點腳本保護。嘗試用--disbable-web-security（通過命令行）啓動google chrome。如果這不起作用，也嘗試把你的角色的東西放入http服務器，而不是使用文件協議。（提示：如果您想讓瀏覽器專用於--disable-web-security，則使用chrome canary - 當然，您也必須設置命令行參數，但兩個chrome版本都同時運行）。對於發行版，您必須在服務器上設置一些提供AngularJS內容的http標頭，以允許訪問Twitter API或任何您想調用的內容。

來源

2013-10-21 18:00:03 Dodekeract

我今天有與Firefox相同的問題。 IE工作正常。我一開始並不認爲它是cors，因爲和你一樣，我在控制檯中沒有發現錯誤，並且在我的錯誤方法中獲得了0的狀態。在firefox控制檯中，我收到了一個200響應，頭部和內容長度都沒有，但沒有實際的響應消息。 Firefox曾經給你一個關於跨站點腳本的警告，它會指向你正確的方向。我通過在我的api上設置cors來解決了這個問題。這真的是最好的方式。如果你只使用GET方式，你也可以嘗試使用jsonp，這個方法是直接構建的，當你不控制你正在使用的api時，它是一個解決方案。

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

來源

2013-11-21 06:10:16 Scott

Angularjs issue $ http.get不能正常工作

回答

相關問題