current community

more stack exchange communities

Stack Exchange
tour help
careers 2.0
Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 10 down vote favorite
4

I am a novice to Angularjs and tried to follow example given for $http.get on angularjs website documentation.

I have a REST service, which when invoked returns data as follows: 

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}

Part of the contents of my index.html file looks like as follows:

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

And my js file looks as follows:

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

But when I run this, I do not see any result for filenames and I see http status code = 0

When I run , 

http://abc.com:8080/Files/REST/v1/list?&filter=FILE
in browser, I still can see desired results (as mentioned above)

I even tried to debug using Firebug in firefox, I see the above URL gets invoked when I hit "Search" button but response looks to be empty. And interestingly in Firebug under URL, it shows 

   OPTIONS "Above URL"

instead of 

   GET "Above URL"

Can you please let me know, what I am doing wrong and why I am not able to access JSON data ?

Thanks,

share|improve this question
add comment

4 Answers

up vote 12 down vote

This is because how angular treats CORS requests (Cross-site HTTP requests). Angular adds some extra HTTP headers by default which is why your are seeing OPTIONS request instead of GET. Try removing X-Requested-With HTTP header by adding this line of code:

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

Regarding CORS, following is mentioned on Mozilla Developer Network:

The Cross-Origin Resource Sharing standard works by adding new HTTP headers that allow servers to describe the set of origins that are permitted to read that information using a web browser.

share|improve this answer
 
It partially worked meaning in Firebug I can see that 'GET "URL"' after removing <pre> "X-Requested-With":"XMLHttpRequest" </pre> from angular.min.js (Please let me know if that's correct). But I am still not able to get any response in the html page. Not sure, if I am doing anything wrong. –  SagarL Mar 22 '13 at 7:13
 
What status code are you getting now? –  Aziz Shaikh Mar 22 '13 at 7:37
 
When I check via Firebug I am getting status code as '200 OK' but nothing is shown in the response. But when I just run REST call, I do get status code as '200 OK' with the correct response. –  SagarL Mar 22 '13 at 19:33
 
Now your call is working, please check if success or error functions is being called. Try placing an alert to see which function is being executed. Your HTML code seems fine, see it in action here: plnkr.co/edit/TLRr1VdADdDHoGikhHu3 Remember to click on the 'preview' icon on the extreme right side. –  Aziz Shaikh Mar 25 '13 at 5:24
 
error function is getting called with status = 0 and data = null. I tried to replace $scope.url = 'search.twitter.com/search.json?q=angularjs';; (this is Twitter's standard JSON REST API). But still the same result. Not sure what's going on ? –  SagarL Mar 28 '13 at 6:29
show 2 more comments
up vote 2 down vote

I have been having the issue using $resource, which also uses $http.

I noticed that when I used AngularJS 1.0.6 the request would not even show up in Firebug, but when using AngularJS 1.1.4 Firebug would show the GET request and the 200 OK response as well as the correct headers, but an empty response. In fact, the headers also showed that the data was coming back as shown by the "Content-Length" header having the correct content length, and comparing this against a REST Client plugin I was using that was successfully retrieving the data.

After being even further suspicious I decided to try a different browser. I had originally been using Firefox 16.0.1 (and also tried 20.0.1), but when I tried IE 9 (and AngularJS 1.1.4) the code worked properly with no issues at all.

Hopefully this will help you find a workaround. In my case, I noticed that I never had this problem with relative URLs, so I'm changing my app around so that both the app and the API are being served on the same port. This could potentially be an AngularJS bug.

share|improve this answer
add comment
up vote 0 down vote

It's cross-site-scripting protection. Try starting google chrome with --disbable-web-security (via command line). If that isn't working also try to put your angular stuff into an http server instead of using the file protocol. (Tip: use chrome canary if you want to have a browser dedicated to --disable-web-security - of course you'll have to set the command line argument too, but both chrome versions run simultaneously). For release you'll have to set some http headers on the server providing the AngularJS-stuff to allow access to the twitter api or whatever you want to call.

share|improve this answer
add comment
up vote 0 down vote

I had the same problem today with firefox. IE worked fine. I didn't think it was cors at first because like you I got no errors in the console and got a status of 0 back in my error method in angular. In the firefox console I was getting a 200 response back in my headers and a content length, but no actual response message. Firefox used to give you a warning about cross site scripting that would point you in the right direction. I resolved the issue by setting up cors on my api. This is really the best way to go. If you are only using GET with your api you could also try using jsonp this is built right into angular and it is a work around for cors when you do not control the api you are consuming.

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

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.