0

I'm trying to create a demo usage of an api in angularjs and I came across this problem.

My Code looks like this:

app.js and index.html

var app = angular.module("ytsApp",['ngRoute','ngResource']);

app.controller('MoviesCtrl',['$scope','movies',function($scope,movies){
    movies.get(function(data){
        alert(data);
    });
}]);

app.factory('movies',['$resource',function($resource){
    return $resource('https://yts.ag/api/v2/list_movies.json',{
        'sort_by': 'year',
        'limit': '15'
    },{
        'load': {
            method: 'GET',
            headers: {
                'Content-Type': 'application/x-www-form-urlencoded'
            }
        }
    });
}]);
<!DOCTYPE html>
<html ng-app="ytsApp">
    <head>
        <title>The Official Home of YIFY Movie Torrent Downloads - YIFY</title>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.5/angular.min.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.5/angular-route.js"></script>

        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.5/angular-resource.js"></script>

    </head>
    <body ng-controller="MoviesCtrl">

        <script type="text/javascript" src="js/app.js"></script>
    </body>
</html>

This is the result that is getting displayed in the console while I open that page:

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://yts.ag/api/v2/list_movies.json?limit=15&sort_by=year. (Reason: CORS header 'Access-Control-Allow-Origin' missing).

I have searched here and there and tried to edit the headers in several ways and couldn't crack it. I appreciate if anyone help me out with this.

apparaokoppuka
  • 19
  • 6
  • If you have access to the backend, you will have to add Cross-Origin policy to your server and allow access to your app. Or you can use JsonP. Json with Padding. See an example here how to use it when making ajax call http://jsfiddle.net/saarmstrong/hYACX/8/light/ – Hasta Tamang Dec 26 '15 at 10:04
  • @hasta-pasta I have tried $http.jsonp() method also. There is response from the server but It's displaying in the console as below. `SyntaxError: missing ; before statement list_movies.json:1:9` – apparaokoppuka Dec 26 '15 at 10:22

1 Answers1

0

You can use jsonp for your demo which supports cross domain:

$http.jsonp('...').then(...);
AngularBoy
  • 1,715
  • 2
  • 25
  • 35
  • I have tried $http.jsonp() method also. There is response from the server but It's displaying in the console as below. `SyntaxError: missing ; before statement list_movies.json:1:9 ` When I click on the `list_movies.json:1:9`, it takes to me to the response body source and there I can see the json response. But it is unusable. Any Idea? `return $http.jsonp('https://yts.ag/api/v2/list_movies.json?callback=JSON_CALLBACK') .success(function(data, status, headers){ console.log(data); });` This is the code I have used. – apparaokoppuka Dec 26 '15 at 10:25
  • Can you just try $http.jsonp('https://yts.ag/api/v2/list_movies.json').then((response) => {console.log(response.data)}); Don't forget to inject $http instead of $resource. – AngularBoy Dec 26 '15 at 10:31
  • Didn't workout. The same error that I have mentioned above persists. :( – apparaokoppuka Dec 26 '15 at 11:01
  • Answer should also clarify that api must serve jsonp format for this to work – charlietfl Dec 26 '15 at 13:10
  • @charlietfl I couldn't understand what you said. Can you please elaborate? – apparaokoppuka Dec 26 '15 at 14:34
  • Yes, it's very simple. Not all API's deliver jsonp. If API isn't CORS enabled or delivers alternate jsonp you have to use a proxy to retrieve the data – charlietfl Dec 26 '15 at 14:39