How to get rid of cross origin request block in chrome?
我对angular很新,试图在angular指令中使用templateUrl。当我尝试在浏览器中运行本地html时,它会向我显示这些错误 - >
XMLHttpRequest无法加载file:///Users/suparnadey/Desktop/workspace/AngularJS/angular_directives/baseChild1.html。交叉源请求仅支持协议方案:http,data,chrome,chrome-extension,https,chrome-extension-resource。
错误:[$ compile:tpload] http://errors.angularjs.org/1.5.0-rc.0/$compile/tpload?p0=baseChild1.html&p1=-1&p2=
在错误(本机)
at file:///Users/suparnadey/Desktop/workspace/AngularJS/angular_directives/angular.min.js:6:421
在file:///Users/suparnadey/Desktop/workspace/AngularJS/angular_directives/angular.min.js:149:48
at file:///Users/suparnadey/Desktop/workspace/AngularJS/angular_directives/angular.min.js:123:217
at m。$ eval(file:///Users/suparnadey/Desktop/workspace/AngularJS/angular_directives/angular.min.js:137:446)
at m。$ digest(file:///Users/suparnadey/Desktop/workspace/AngularJS/angular_directives/angular.min.js:135:41)
at m。$ apply(file:///Users/suparnadey/Desktop/workspace/AngularJS/angular_directives/angular.min.js:138:236)
at file:///Users/suparnadey/Desktop/workspace/AngularJS/angular_directives/angular.min.js:20:10
at Object.e [as invoke](file:///Users/suparnadey/Desktop/workspace/AngularJS/angular_directives/angular.min.js:40:477)
at c(file:///Users/suparnadey/Desktop/workspace/AngularJS/angular_directives/angular.min.js:19:440)
base.html文件
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | <!DOCTYPE html> <html ng-app="iAXApp"> <head> <meta charset="utf-8" /> IONOS iAX <!-- <link rel="stylesheet" type="text/css" href="base.css"> --> <script src="angular.min.js"> <script src="base.js"> </head> <body ng-controller="MainCtrl"> <main-directive></main-directive> </body> </html> |
base.js
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | var app = angular.module('iAXApp', []); app.controller('MainCtrl', function($scope) { $scope.name ="Publisher"; }); app.directive("mainDirective", function(){ return{ restrict: 'E', // tamplate:"{{name}}", templateUrl:"baseChild1.html" } }); |
baseChild1.html
1 | {{name}} |
这是出于标准安全原因,所有现代浏览器都阻止跨源请求。
安装此chrome插件并启用它:chrome插件以启用cors
如果这不起作用,那么您应该尝试在http服务器上运行您的项目。
看看这个答案:http-server运行本地项目。
我希望这肯定会有所帮助。