Why is Angular JS $http.get() not working in this code?

Question

I'm trying to get the RSS feeds from a link. The ng-click function getNews("SomeText") is working, I have confirmed it with filling a container with some text. However, $http.get() is not working. I only want to show the data for now, I'll parse it later.

Here is my Angular JS code.

var app = angular.module("app",[]);
app.controller("newsController", function($scope, $http) {
  $scope.getNews = function(topic) {

    if (topic === "NAmerica") {
    //The program enters this part, I have confirmed, only $http.get() doesn't work
      $http.get('http://www.usnews.com/rss/education')
      .then(function (response) {
        $scope.message = response;

      });
    }
  };
});

My HTML file has this structure:

<html ng-app="app">
   <body ng-controller="newsContainer">
       <a href="#" id="NAmerica" ng-click="getNews('NAmerica')">US &amp; Canada</a>
       <p> {{message}} </p>
   </body>
</html>

What does the response look like? Is it just a string? My guess is that an object is getting returned and you have to do something like response.data. — R. Salisbury
– R. Salisbury, Commented Dec 3, 2015 at 18:17
Your controller is called newsController, not newsContainer. — Jan Klimo
– Jan Klimo, Commented Dec 3, 2015 at 18:17
You can't just use AJAX on any URL. The server you are hitting has to allow it. As it is, the one you are attempting, does not. XMLHttpRequest cannot load http://www.usnews.com/rss/education?_=1449166602671. No 'Access-Control-Allow-Origin' Edit: Also, typo on controller name, as mentioned above. — Antiga
– Antiga, Commented Dec 3, 2015 at 18:18
@JanKlimo, I have corrected that mistake, still doesn't work. — user3566211
– user3566211, Commented Dec 3, 2015 at 18:20
http://www.usnews.com/rss/education is not a Restful API. If you try to do a get request on Postman, it returns you some XML stuff. — Shaohao
– Shaohao, Commented Dec 3, 2015 at 18:23

helmbert · Accepted Answer · 2015-12-03 18:31:02Z

As already noted in comments, modern browsers cannot simply request arbitrary URLs via AJAX. This restriction is entirely intentional and called the Same-Origin Policy. By default, browsers can only execute AJAX requests to the same domain that the JavaScript is executed on.

Usually, there are a few options that you can take.

Cross-Domain requests are allowed when the requested site contains a Cross-Origin Resource Sharing (CORS) header in its HTTP response, which usually looks something like this:
```
Access-Control-Allow-Origin: http://yoursite.com
```
Of course, this is only an option when you're in control of the domain that you're requesting content from. If you're executing requests to a 3rd party site, there's usually nothing that you can do about this on your own.

Btw, you should also be able to see a respective error message in your browser console.
Request the foreign content using a server-side script on your domain, for instance using a PHP or [insert random server-side scripting language here] script on your server that you then request via AJAX. That way, you can work around the Same-Origin Policy, since the user's browser can now request a resource on your own domain.

I didn't know about Same-Origin Policy. So you suggest, I should rather request my server to run a script that gets the response and forward it to client?

Collectives™ on Stack Overflow

Why is Angular JS $http.get() not working in this code?

1 Answer 1

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Related