''访问受限URI被拒绝'"尝试使用ng模板时出错

''Access to restricted URI denied'" error when trying to use ng-template

本文关键字：ng 出错 quot 访问 URI 拒绝      更新时间：2023-09-26

我正在尝试使用ng-include作为html中的递归模板。我第一次用jsfiddle尝试它，它很有效。这是URLhttp://jsfiddle.net/uXbn6/3115/。然而，当我尝试在本地做同样的事情时。我得到这个错误：

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

这是我完整的源代码文件：

<!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>

您的问题是，您可能正在打开file://协议上的html文件。尝试使用一个简单的http服务器在本地提供它（例如，如果您安装了Python，文件所在目录中的python -m SimpleHTTPServer）。

根据ngInclude:的Angular文档

默认情况下，模板URL被限制为与应用程序文档相同的域和协议。这是通过调用它上的$se.getTrustedResourceUrl来完成的。要从其他域或协议加载模板，您可以将它们列入白名单，也可以将它们包装为可信值。请参阅Angular的严格上下文转义。

此外，浏览器的同源策略和跨源资源共享（CORS）策略可能会进一步限制模板是否成功加载例如，ngInclude不适用于所有浏览器上的跨域请求，也不适用于某些浏览器上的file://access[强调矿]

附言：运行从本地服务器提供的代码是有效的。：）

相关文章：