AngularJS errors: Blocked loading resource from url not allowed by $sceDelegate policy

Question

I'm currently following a tutorial in AngularJS. This is the code in my controllers.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'm getting the following errors:

1) Blocked loading resource from url not allowed by $sceDelegate policy.

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

I'm not particularly sure at all what could be causing these errors, I'm very new to Angular. The only possible differences I've seen between mine and other examples is 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've noticed are that in mine there is a semi-colon at the end of the getDrivers function and that I have the use strict statement at the top of the file as well. However, grunt refuses to run the application without both of those lines, so I don't think that could be the issue.

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

Solution 1

Issue #1 :

The url you are trying to request from your app is not safe according to the AngularJS sceDelegatePolicy. To resolve it, you need to whitelist the url in your app using 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 above example are from here

Issue #2:

The issue with the error TypeError: ergastAPIservice.getDrivers(...).success is not a function could be due to the AngularJS version that you are using. The legacy .success/.error methods are now deprecated in the latest AngularJs version 1.6. Here is the Deprecation notice If you are using the latest AngularJs, that could be the reason, otherwise, we need more information to debug the issue.

Solution 2

You can use the following

$scope.trustSrc = function(src) {
    return $sce.trustAsResourceUrl(src);
}

and your html should have {{trustSrc(myUrl)}} instead of {{myUrl}}

Comments

[lance.dolan]

Where is $sce defined and what is it a reference to?

[tschumann]

@lance.dolan it's a docs.angularjs.org/api/ng/service/$sce - add it to the function() parameters when you create your controller and to the array assigned to controller.$inject