AngularJS错误：$sceDelegate策略不允许从URL阻止加载资源。

Question

我目前正在学习AngularJS的教程。这是我的controllers.js文件中的代码。

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

我收到了以下错误：

1) 被$sceDelegate策略阻止的url资源加载。

2) TypeError: ergastAPIservice.getDrivers(...).success不是一个函数

我不确定是什么原因导致了这些错误，我对Angular非常新手。我在这段代码中唯一可能看到的区别是：（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;
});

我注意到的区别是，我的代码在getDrivers函数结尾有一个分号，并且文件顶部也有"use strict"语句。但是，如果这两行都不加，grunt会拒绝运行该应用程序，因此我认为这可能不是问题所在。

如果有人能指点我正确的方向，我将非常感激。

- Joeb Rogers

Answer 1

问题 #1 :

您的应用程序尝试请求的URL不符合AngularJSsceDelegatePolicy的安全要求。为了解决这个问题，您需要在应用程序中使用resourceUrlWhitelist方法将该URL加入白名单，具体操作如下：

在 $sceDelegateProvider 中添加以下内容：

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

清晰的解释和上述示例来自于这里

问题 #2:

错误 TypeError: ergastAPIservice.getDrivers(...).success is not a function 可能是由于您使用的AngularJS版本而导致。 在最新的AngularJs 1.6版本中，传统的.success/.error方法已被弃用。 这里是弃用通知。 如果您正在使用最新的AngularJs，则可能是原因，否则我们需要更多信息来调试此问题。

- Supradeep

Answer 2

您可以使用以下内容

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

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

- Angularjs developer

---

$sce 是在哪里定义的，它是什么的引用？ - lance.dolan

@lance.dolan 这是一个 https://docs.angularjs.org/api/ng/service/$sce - 将其添加到创建控制器时的 function() 参数和分配给 controller.$inject 的数组中。 - tschumann