web-dev-qa-db-fra.com

Erreurs AngularJS: ressources de chargement bloquées à partir de l'URL non autorisées par la règle $ sceDelegate

Je suis actuellement un tutoriel sur AngularJS. C'est le code dans mon fichier 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;
    });
});

Je reçois les erreurs suivantes:

1) La ressource de chargement bloquée à partir de l'URL n'est pas autorisée par la règle $ sceDelegate.

2) TypeError: ergastAPIservice.getDrivers (...). Success n'est pas une fonction

Je ne suis pas du tout sûr de ce qui pourrait causer ces erreurs, je suis très novice dans Angular. La seule différence possible que j'ai vue entre le mien et d'autres exemples est que, dans ce bloc de 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;
});

Les différences que j'ai remarquées sont que dans la mienne, il y a un point-virgule à la fin de la fonction getDrivers et que l'instruction use strict figure également en haut du fichier. Cependant, Grunt refuse d'exécuter l'application sans ces deux lignes. Je ne pense donc pas que cela puisse être le problème.

Si quelqu'un pouvait me diriger dans la bonne direction, je vous en serais très reconnaissant.

javascriptangularjsangularjs-1.6
7
Joeb Rogers

Numéro 1:

Le url que vous essayez de demander à votre application n'est pas sûr selon AngularJS sceDelegatePolicy . Pour le résoudre, vous avez besoin de mettre en liste blanche l'URL dans votre application à l'aide de la méthode resourceUrlWhitelist dans $ sceDelegateProvider comme indiqué ci-dessous:

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

Pour une explication claire et l'exemple ci-dessus sont de ici

Numéro 2:

Le problème avec l'erreur TypeError: ergastAPIservice.getDrivers(...).success is not a function pourrait être dû à la version d'AngularJS que vous utilisez. Les méthodes héritées .success/.error sont maintenant obsolètes dans la dernière version d'AngularJs 1.6. Voici le Avis de déprécation Si vous utilisez les derniers AngularJs, cela pourrait en être la raison, sinon, nous avons besoin de plus d’informations pour résoudre le problème. 

15
Supradeep

Vous pouvez utiliser ce qui suit

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

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