＆＃39;＆＃39;访问受限制的URI被拒绝＆＃39;＆＃34;尝试使用ng-template时出错

时间：2015-12-11 10:18:51

标签： javascript angularjs cors

我试图在我的html中使用ng-include作为递归模板。我首先用jsfiddle尝试它，它的工作原理。这是网址http://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>

1 个答案:

答案 0 :(得分：1)

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

根据the Angular docs for ngInclude：

  

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

     

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

P.S。：运行从本地服务器提供的代码。 ：）

相关问题
最新问题