AngularJS Errors: Blocked download resource from URL not allowed by $ sceDelegate policy

Question

I am currently following a tutorial in AngularJS. This is the code in the controller.js file.

'use strict'; angular.module ( 'F1FeederApp.controllers' , [] ) .controller ( 'driversController' , function ( $scope , ergastAPIservice ) { $scope.nameFilter = null; $scope.driversList = []; ergastAPIservice.getDrivers ().success ( function ( response ) { $scope.driversList = response.MRData.StandingsTable.StandingsLists [ 0 ].DriverStandings; }); }); 

I get the following errors:

1) A blocked download resource from url is not allowed by the $ sceDelegate policy.

2) TypeError: ergastAPIservice.getDrivers (...). Success is not a function

I'm not quite sure what might cause these errors, but I'm very new to Angular. The only possible differences that I saw between my and other examples are that in this block of code: (services.js)

 'use strict'; angular.module ( 'F1FeederApp.services' , [] ) .factory ( 'ergastAPIservice' , function ( $http ) { var ergastAPI = {}; ergastAPI.getDrivers = function () { return $http ({ method : 'JSONP' , url : 'http://ergast.com/api/f1/2013/driverStandings.json?callback=JSON_CALLBACK' }); }; return ergastAPI; }); 

The differences I noticed are that I have a half colon at the end of the getDrivers function and that I have a use strict statement at the top of the file. However, grunt refuses to run the application without both of these lines, so I don't think this could be a problem.

If anyone could point me in the right direction here, I would be very grateful.

Answer 1

Issue No. 1 :

The URL you are trying to request from your application is not secure according to AngularJS sceDelegatePolicy . To solve this problem, you need to whitelist your application using the resourceUrlWhitelist method in $ sceDelegateProvider, as shown below:

 angular.module('myApp', []).config(function($sceDelegateProvider) { $sceDelegateProvider.resourceUrlWhitelist([ // Allow same origin resource loads. 'self', // Allow loading from our assets domain. **. 'http://ergast.com/**' ]); 

For a clear explanation and the above example from here

Issue No. 2:

The error with the TypeError: ergastAPIservice.getDrivers(...).success is not a function error TypeError: ergastAPIservice.getDrivers(...).success is not a function possibly related to the version of AngularJS being used. .success/.error methods .success/.error now deprecated in the latest version of AngularJs 1.6 . Here is a deprecation notice If you are using the latest versions of AngularJ, this may be the reason, otherwise we will need additional information to fix the problem.

Answer 2

You can use the following

 $scope.trustSrc = function(src) { return $sce.trustAsResourceUrl(src); } and your html should have {{trustSrc(myUrl)}} instead of {{myUrl}}