Javascript ''；访问受限URI被拒绝'&引用；尝试使用ng模板时出错
我试图在html中使用ng include作为递归模板。我第一次用jsfiddle进行了尝试，效果很好。这里是URL。 然而，当我尝试在本地做同样的事情时。我得到这个错误：Javascript ''；访问受限URI被拒绝'&引用；尝试使用ng模板时出错,javascript,angularjs,cors,Javascript,Angularjs,Cors,我试图在html中使用ng include作为递归模板。我第一次用jsfiddle进行了尝试，效果很好。这里是URL。 然而，当我尝试在本地做同样的事情时。我得到这个错误： Error: Access to restricted URI denied createHttpBackend/<@http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.js:10765:1 sendReq@http://ajax.googleapi
Error: Access to restricted URI denied
createHttpBackend/<@http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.js:10765:1
sendReq@http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.js:10558:1
$http/serverRequest@http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.js:10268:16
processQueue@http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.js:14792:28
scheduleProcessQueue/<@http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.js:14808:27
$RootScopeProvider/this.$get</Scope.prototype.$eval@http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.js:16052:16
$RootScopeProvider/this.$get</Scope.prototype.$digest@http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.js:15870:15
$RootScopeProvider/this.$get</Scope.prototype.$apply@http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.js:16160:13
bootstrapApply@http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.js:1679:9
invoke@http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.js:4523:14
错误：对受限URI的访问被拒绝
createHttpBackend/您的问题是您可能正在使用文件：//
协议打开html文件。尝试使用简单的http服务器在本地为其提供服务（例如，如果您安装了python，则在文件所在目录中的python-m SimpleHTTPServer
）
根据：
默认情况下，模板URL限制为与应用程序文档相同的域和协议。这是通过调用$sce.getTrustedResourceUrl来完成的。要从其他域或协议加载模板，您可以将其列入白名单或将其包装为可信值。参考Angular的严格上下文转义
此外，浏览器的同源策略和跨源资源共享（CORS）策略可能进一步限制模板是否成功加载例如，ngInclude不适用于所有浏览器上的跨域请求，也不适用于某些浏览器上的file://访问。[emphasis mine]
注意：运行从本地服务器提供的代码有效。：） 您是否在本地某个Web服务器上运行应用程序？听起来您正试图通过文件：//
协议访问模板。投票时，我同时输入了我的评论：）
<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.js"></script>
<script>
angular.module("Application", []).
controller("TreeController", ['$scope', function($scope) {
$scope.links = [{
"id": 1,
"fc": "FC_1",
"adjacentLists": [{
"id": 2,
"fc": "FC_1",
"adjacentLists": [{
"id": 3,
"fc": "FC_1",
"adjacentLists": [{
"id": 7,
"fc": "FC_1",
"speedLimit": 55
}, {
"id": 6,
"fc": "FC_1",
"speedLimit": 60
}, {
"id": 8,
"fc": "FC_1",
"speedLimit": 0
}],
"speedLimit": 0
}, {
"id": 4,
"fc": "FC_1",
"speedLimit": 0
}, {
"id": 5,
"fc": "FC_2",
"adjacentLists": [{
"id": 9,
"fc": "FC_3",
"speedLimit": 0,
"query": {
"question": "Link 9 has differnet function class of FC_3 instead of FC_2 of source link 5. Do you want to continue?",
"response": false
}
}, {
"id": 11,
"fc": "FC_3",
"speedLimit": 0,
"query": {
"question": "Link 11 has differnet function class of FC_3 instead of FC_2 of source link 5. Do you want to continue?",
"response": false
}
}],
"speedLimit": 0,
"query": {
"question": "Link 5 has differnet function class of FC_2 instead of FC_1 of source link 2. Do you want to continue?",
"response": false
}
}],
"speedLimit": 0
}],
"speedLimit": 50
}, {
"id": 2,
"fc": "FC_1",
"adjacentLists": [{
"id": 3,
"fc": "FC_1",
"adjacentLists": [{
"id": 7,
"fc": "FC_1",
"speedLimit": 55
}, {
"id": 6,
"fc": "FC_1",
"speedLimit": 60
}, {
"id": 8,
"fc": "FC_1",
"speedLimit": 0
}],
"speedLimit": 0
}, {
"id": 4,
"fc": "FC_1",
"speedLimit": 0
}, {
"id": 5,
"fc": "FC_2",
"adjacentLists": [{
"id": 9,
"fc": "FC_3",
"speedLimit": 0,
"query": {
"question": "Link 9 has differnet function class of FC_3 instead of FC_2 of source link 5. Do you want to continue?",
"response": false
}
}, {
"id": 11,
"fc": "FC_3",
"speedLimit": 0,
"query": {
"question": "Link 11 has differnet function class of FC_3 instead of FC_2 of source link 5. Do you want to continue?",
"response": false
}
}],
"speedLimit": 0,
"query": {
"question": "Link 5 has differnet function class of FC_2 instead of FC_1 of source link 2. Do you want to continue?",
"response": false
}
}],
"speedLimit": 0
}, {
"id": 3,
"fc": "FC_1",
"adjacentLists": [{
"id": 7,
"fc": "FC_1",
"speedLimit": 55
}, {
"id": 6,
"fc": "FC_1",
"speedLimit": 60
}, {
"id": 8,
"fc": "FC_1",
"speedLimit": 0
}],
"speedLimit": 0
}, {
"id": 4,
"fc": "FC_1",
"speedLimit": 0
}, {
"id": 5,
"fc": "FC_2",
"adjacentLists": [{
"id": 9,
"fc": "FC_3",
"speedLimit": 0,
"query": {
"question": "Link 9 has differnet function class of FC_3 instead of FC_2 of source link 5. Do you want to continue?",
"response": false
}
}, {
"id": 11,
"fc": "FC_3",
"speedLimit": 0,
"query": {
"question": "Link 11 has differnet function class of FC_3 instead of FC_2 of source link 5. Do you want to continue?",
"response": false
}
}],
"speedLimit": 0,
"query": {
"question": "Link 5 has differnet function class of FC_2 instead of FC_1 of source link 2. Do you want to continue?",
"response": false
}
}, {
"id": 6,
"fc": "FC_1",
"speedLimit": 60
}, {
"id": 7,
"fc": "FC_1",
"speedLimit": 55
}, {
"id": 8,
"fc": "FC_1",
"speedLimit": 0
}, {
"id": 10,
"fc": "FC_1",
"adjacentLists": [{
"id": 9,
"fc": "FC_3",
"speedLimit": 0,
"query": {
"question": "Link 9 has differnet function class of FC_3 instead of FC_2 of source link 5. Do you want to continue?",
"response": false
}
}, {
"id": 11,
"fc": "FC_3",
"speedLimit": 0,
"query": {
"question": "Link 11 has differnet function class of FC_3 instead of FC_2 of source link 5. Do you want to continue?",
"response": false
}
}],
"speedLimit": 0
}, {
"id": 9,
"fc": "FC_3",
"speedLimit": 0,
"query": {
"question": "Link 9 has differnet function class of FC_3 instead of FC_2 of source link 5. Do you want to continue?",
"response": false
}
}, {
"id": 11,
"fc": "FC_3",
"speedLimit": 0,
"query": {
"question": "Link 11 has differnet function class of FC_3 instead of FC_2 of source link 5. Do you want to continue?",
"response": false
}
}];
$scope.link = $scope.links[0];
}]);
</script>
<script type="text/ng-template" id="tree_item_renderer.html">
Processing Link {{link.id}}</br>
<span ng-if="link.query">
{{link.query.question}}
</span>
<span ng-if="link.adjacentLists.length>0">
<ul>
<li ng-repeat="link in link.adjacentLists" ng-include="'tree_item_renderer.html'"></li>
</ul>
</span>
</script>
<body>
<ul ng-app="Application" ng-controller="TreeController">
<span ng-include="'tree_item_renderer.html'"></span>
</ul>
</body>
</html>