2013-03-21 36 views
20

Tôi là người mới đến Angularjs và đã cố gắng làm theo ví dụ cho $ http.get trên tài liệu trang web của angularjs.

Tôi có một dịch vụ REST, mà khi gọi dữ liệu lợi nhuận như sau:

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} 

Một phần của nội dung của file index.html của tôi trông giống như sau:

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

Và js của tôi tệp trông như sau:

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

Nhưng khi tôi chạy điều này, tôi không thấy kết quả nào cho tên tệp và tôi thấy mã trạng thái http = 0

Khi tôi chạy,

http://abc.com:8080/Files/REST/v1/list?&filter=FILE
trong trình duyệt, tôi vẫn có thể thấy kết quả mong muốn (như đã đề cập ở trên)

Tôi thậm chí đã cố gắng để gỡ lỗi sử dụng Firebug trong firefox, tôi thấy URL ở trên được gọi khi tôi nhấn nút "Tìm kiếm" nhưng câu trả lời có vẻ trống. Và thú vị trong Firebug dưới URL, nó cho thấy

 
    OPTIONS "Above URL" 

thay vì

 
    GET "Above URL" 

bạn có thể vui lòng cho tôi biết, những gì tôi đang làm sai và tại sao tôi không thể truy cập dữ liệu JSON?

Cảm ơn,

+0

Hey Tôi biết đã lâu rồi, nhưng bạn đã bao giờ gặp phải vấn đề này chưa? Câu trả lời được chấp nhận không hoạt động đối với tôi trong Firefox hoặc Chrome. Nó vẫn gọi OPTIONS. – tbogatchev

Trả lời

19

Điều này là do cách xử lý góc yêu cầu CORS (Yêu cầu HTTP qua trang web). Angular bổ sung thêm một số tiêu đề HTTP phụ theo mặc định, đó là lý do tại sao bạn nhìn thấy yêu cầu OPTIONS thay vì GET. Hãy thử loại bỏ X-Requested-With HTTP header bằng cách thêm dòng mã này:

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

Về CORS, sau đây được đề cập trên Mozilla Developer Network:

Các tác phẩm tiêu chuẩn Cross-Origin Resource Sharing bằng cách thêm HTTP mới tiêu đề cho phép máy chủ để mô tả tập hợp xuất xứ được cho phép đọc thông tin đó bằng trình duyệt web.

+0

Nó có ý nghĩa một phần trong Firebug Tôi có thể thấy URL "GET" "sau khi xóa

 "X-Requested-With":"XMLHttpRequest"
khỏi angular.min.js (Vui lòng cho tôi biết nếu đó là chính xác). Nhưng tôi vẫn không thể nhận được bất kỳ phản hồi nào trong trang html. Không chắc chắn, nếu tôi làm gì sai. – SagarL

+0

Bạn đang nhận mã trạng thái nào? –

+0

Khi tôi kiểm tra qua Firebug, tôi nhận được mã trạng thái là '200 OK' nhưng không có gì được hiển thị trong phản hồi. Nhưng khi tôi chỉ chạy lệnh REST, tôi nhận được mã trạng thái là '200 OK' với phản hồi chính xác. – SagarL

3

Tôi đã gặp sự cố khi sử dụng $ resource, cũng sử dụng $ http.

Tôi nhận thấy rằng khi tôi sử dụng AngularJS 1.0.6, yêu cầu sẽ không hiển thị trong Firebug, nhưng khi sử dụng Firebug AngularJS 1.1.4 sẽ hiển thị yêu cầu GET và phản hồi 200 OK cũng như tiêu đề chính xác, nhưng một phản ứng trống. Trên thực tế, các tiêu đề cũng cho thấy dữ liệu đã quay lại như được hiển thị bởi tiêu đề "Nội dung Độ dài" có độ dài nội dung chính xác và so sánh điều này với một plugin REST Client mà tôi đang sử dụng đã truy xuất dữ liệu thành công.

Sau khi nghi ngờ hơn nữa, tôi đã quyết định thử một trình duyệt khác. Ban đầu tôi đã sử dụng Firefox 16.0.1 (và cũng đã thử 20.0.1), nhưng khi tôi thử IE 9 (và AngularJS 1.1.4) mã hoạt động đúng cách mà không có vấn đề gì cả.

Hy vọng điều này sẽ giúp bạn tìm giải pháp thay thế.Trong trường hợp của tôi, tôi nhận thấy rằng tôi chưa bao giờ gặp vấn đề này với các URL tương đối, vì vậy tôi đang thay đổi ứng dụng của mình để cả ứng dụng và API đang được phân phối trên cùng một cổng. Điều này có khả năng có thể là một lỗi AngularJS.

0

Đó là tính năng bảo vệ cross-site-scripting. Thử khởi động google chrome bằng --disbable-web-security (thông qua dòng lệnh). Nếu điều đó không hoạt động, hãy thử đặt nội dung góc cạnh của bạn vào máy chủ http thay vì sử dụng giao thức tệp. (Mẹo: sử dụng chrome canary nếu bạn muốn có một trình duyệt dành riêng cho --disable-web-security - tất nhiên bạn cũng sẽ phải đặt đối số dòng lệnh, nhưng cả hai phiên bản chrome đều chạy đồng thời). Để phát hành, bạn sẽ phải đặt một số tiêu đề http trên máy chủ cung cấp các công cụ AngularJS để cho phép truy cập vào api twitter hoặc bất cứ điều gì bạn muốn gọi.

2

Tôi đã gặp sự cố tương tự ngay hôm nay với firefox. IE làm việc tốt. Tôi không nghĩ rằng đó là cors lúc đầu bởi vì như bạn tôi không có lỗi trong giao diện điều khiển và có một tình trạng của 0 trở lại trong phương pháp lỗi của tôi trong góc. Trong giao diện điều khiển firefox, tôi đã nhận được phản hồi 200 trong tiêu đề của tôi và độ dài nội dung, nhưng không có thông báo phản hồi thực tế. Firefox được sử dụng để cung cấp cho bạn một cảnh báo về kịch bản trang web chéo mà sẽ chỉ cho bạn đi đúng hướng. Tôi đã giải quyết vấn đề bằng cách thiết lập cors trên api của tôi. Đây thực sự là cách tốt nhất để đi. Nếu bạn chỉ sử dụng GET với api của bạn, bạn cũng có thể thử sử dụng jsonp này được xây dựng ngay vào góc và nó là một công việc xung quanh cho cors khi bạn không kiểm soát api bạn đang tiêu thụ.

$http.jsonp('http://yourapi.com/someurl') 
    .success(function (data, status, headers, config) { 
     alert("Hooray!"); 
    }) 
    .error(function (data, status, headers, config) { 
     alert("Dang It!"); 
    }); 
Các vấn đề liên quan