外部资源没有被AngularJs加载
使用Angular和Phonegap，我试图加载远程服务器上的video，但遇到了问题。 在我的JSON中，URL是作为普通的HTTP URLinput的。
"src" : "http://www.somesite.com/myvideo.mp4" 我的video模板
<video controls poster="img/poster.png"> <source ng-src="{{object.src}}" type="video/mp4"/> </video>
我的所有其他数据被加载，但是当我看我的控制台，我得到这个错误：
Error: [$interpolate:interr] Can't interpolate: {{object.src}} Error: [$sce:insecurl] Blocked loading resource from url not allowed by $sceDelegate policy. URL
我尝试在我的configuration设置中添加$compileProvider ，但是它没有解决我的问题。
$compileProvider.aHrefSanitizationWhitelist(/^\s*(https?|ftp|mailto|file|tel):/);
我看到这个post关于跨域问题，但我不知道如何解决这个问题，或者我应该走什么方向。任何想法？ 任何帮助表示赞赏
这是为我工作的唯一解决scheme：
var app = angular.module('plunker', ['ngSanitize']); app.controller('MainCtrl', function($scope, $sce) { $scope.trustSrc = function(src) { return $sce.trustAsResourceUrl(src); } $scope.movie = {src:"http://www.youtube.com/embed/Lx7ycjC8qjE", title:"Egghead.io AngularJS Binding"}; });
然后在iframe中：
<iframe class="youtube-player" type="text/html" width="640" height="385" ng-src="{{trustSrc(movie.src)}}" allowfullscreen frameborder="0">
另一个简单的解决scheme是创build一个filter
app.filter('trusted', ['$sce', function ($sce) { return function(url) { return $sce.trustAsResourceUrl(url); }; }]);
然后在ng-src指定filter：
<video controls poster="img/poster.png"> <source ng-src="{{object.src | trusted}}" type="video/mp4"/> </video>
将$ sceDelegateProvider白名单资源
这是由于Angular 1.2中新的安全策略引起的。 它通过阻止黑客拨出（即向外部URL请求，可能包含有效载荷）使得XSS变得更加困难。
为了妥善解决这个问题，您需要将您想要允许的域名列入白名单，如下所示：
angular.module('myApp',['ngSanitize']).config(function($sceDelegateProvider) { $sceDelegateProvider.resourceUrlWhitelist([ // Allow same origin resource loads. 'self', // Allow loading from our assets domain. Notice the difference between * and **. 'http://srv*.assets.example.com/**' ]); // The blacklist overrides the whitelist so the open redirect here is blocked. $sceDelegateProvider.resourceUrlBlacklist([ 'http://myapp.example.com/clickThru**' ]); });
这个例子是从你可以在这里阅读的文档中解除的：
https://docs.angularjs.org/api/ng/provider/$sceDelegateProvider
一定要在你的应用中包含ngSanitize来完成这个工作。
禁用该function
如果你想closures这个有用的function，并确保你的数据是安全的，你可以简单地允许**，如下所示：
angular.module('app').config(function($sceDelegateProvider) { $sceDelegateProvider.resourceUrlWhitelist(['**']); });
在这里有同样的问题。 我需要绑定到Youtube链接。 作为一个全球性的解决scheme ，对我来说是什么工作是把以下内容添加到我的configuration：
.config(['$routeProvider', '$sceDelegateProvider', function ($routeProvider, $sceDelegateProvider) { $sceDelegateProvider.resourceUrlWhitelist(['self', new RegExp('^(http[s]?):\/\/(w{3}.)?youtube\.com/.+$')]); }]);
在这里添加“自我”是很重要的 – 否则将无法绑定到任何URL。 从angular度文档
'self' – 可以使用特殊string'self'来匹配与使用相同协议的应用程序文档相同的域中的所有URL。
有了这个，我现在可以直接绑定到任何Youtube链接。
你显然必须自定义正则expression式来满足你的需要。 希望它有帮助！
解决这个问题的最好和简单的解决scheme是从控制器中的这个function传递你的数据。
$scope.trustSrcurl = function(data) { return $sce.trustAsResourceUrl(data); }
在html页面
<iframe class="youtube-player" type="text/html" width="640" height="385" ng-src="{{trustSrcurl(video.src)}}" allowfullscreen frameborder="0"></iframe>
我用Videoogular遇到了同样的问题。 在使用ng-src时，我得到了以下内容：
Error: [$interpolate:interr] Can't interpolate: {{url}} Error: [$sce:insecurl] Blocked loading resource from url not allowed by $sceDelegate policy
我通过编写一个基本的指令来解决这个问题：
angular.module('app').directive('dynamicUrl', function () { return { restrict: 'A', link: function postLink(scope, element, attrs) { element.attr('src', scope.content.fullUrl); } }; });
html：
<div videogular vg-width="200" vg-height="300" vg-theme="config.theme"> <video class='videoPlayer' controls preload='none'> <source dynamic-url src='' type='{{ content.mimeType }}'> </video> </div>
根据错误消息，您的问题似乎与插值有关（通常是expression式{{}} ），而不是跨域问题。 基本上ng-src="{{object.src}}"很烂。
ng-src是用img标签devise的。 它可能不适合<source> 。 请参阅http://docs.angularjs.org/api/ng.directive:ngSrc
如果你声明<source src="somesite.com/myvideo.mp4"; type="video/mp4"/> <source src="somesite.com/myvideo.mp4"; type="video/mp4"/> ，它会工作，对不对？ （注意，我删除了ng-src中的ng-src ）如果不是，它必须先被修复。
然后确保{{object.src}}返回期望值（ 在 <video> ）：
<span>{{object.src}}</span> <video>...</video>
如果它返回期望的值，下面的语句应该工作：
<source src="{{object.src}}"; type="video/mp4"/> //src instead of ng-src
如果有人正在寻找一个TypeScript解决scheme：
.ts文件（在适用的情况下更改variables）：
module App.Filters { export class trustedResource { static $inject:string[] = ['$sce']; static filter($sce:ng.ISCEService) { return (value) => { return $sce.trustAsResourceUrl(value) }; } } } filters.filter('trustedResource', App.Filters.trusted.filter);
HTML：
<video controls ng-if="HeaderVideoUrl != null"> <source ng-src="{{HeaderVideoUrl | trustedResource}}" type="video/mp4"/> </video>
