web-dev-qa-db-ja.com

AngularJSエラー：ブロックされたURLからのリソースの読み込みは$ sceDelegateポリシーでは許可されていません

現在、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ステートメントもファイルの先頭にあります。しかし、うなり声はそれらの両方の行なしでアプリケーションを実行することを拒否するので、私はそれが問題になることはないと思います。

誰かが私をここで正しい方向に向けることができれば、私は非常に感謝します。

javascriptangularjsangularjs-1.6
10
Joeb Rogers

問題＃1：

アプリからリクエストしようとしているurlは、AngularJS sceDelegatePolicy 。それを解決するには、$ sceDelegateProviderのresourceUrlWhitelistメソッドを使用して、アプリのURLをホワイトリストに登録する必要があります。下に示された ：

_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のバージョンが原因である可能性があります。レガシー_.success/.error_メソッドは、最新のAngularJsバージョン1.6で非推奨になりました。これが非推奨の通知です。最新のAngularJを使用している場合は、それが理由である可能性があります。それ以外の場合は、詳細情報が必要です問題をデバッグします。

19
Supradeep

以下を使用できます

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

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