How to get rid of cross origin request block in chrome?

Question

I'm very new to angular, trying to use a templateUrl in a angular directive. When I try to run the local html in browser it's showing me these errors -->

XMLHttpRequest cannot load file:///Users/suparnadey/Desktop/workspace/AngularJS/angular_directives/baseChild1.html. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.

Error: [$compile:tpload] http://errors.angularjs.org/1.5.0-rc.0/$compile/tpload?p0=baseChild1.html&p1=-1&p2= at Error (native) at file:///Users/suparnadey/Desktop/workspace/AngularJS/angular_directives/angular.min.js:6:421 at 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

<!DOCTYPE html>
<html ng-app="iAXApp">

  <head>
    <meta charset="utf-8" />
    <title>IONOS iAX</title>

    <!-- <link rel="stylesheet" type="text/css" href="base.css"> -->

    <script src="angular.min.js"></script>
    <script src="base.js"></script>

  </head>
  <body ng-controller="MainCtrl">

      <main-directive></main-directive>

  </body>

</html>

base.js

var app = angular.module('iAXApp', []);

app.controller('MainCtrl', function($scope) {
    $scope.name = "Publisher";


});

app.directive("mainDirective", function(){
    return{
        restrict: 'E',
        // tamplate: "<h1>{{name}}</h1>",
        templateUrl: "baseChild1.html"
    }
});

baseChild1.html

<h1>{{name}}</h1>

Can you add also the baseChild1.html please? – Radu Feb 11 '16 at 09:16 — Radu, Feb 11 '16 at 09:16

score 1 · Accepted Answer · edited May 23 '17 at 11:59

1

This is for standard security reasons that all modern browsers block cross origin requests.

Install this chrome plugin and enable it: chrome plugin to enable cors

If this does not work, then you should try to run your project on a http-server. Have a look this answer: http-server to run local projects.

I hope this will surely help.

edited May 23 '17 at 11:59

Community

1
1

answered Feb 11 '16 at 09:18

ashfaq.p

5,379
21
35

Installing security holes in your browser is a terrible idea. – Quentin Feb 11 '16 at 09:22
Not when you are working locally. – ashfaq.p Feb 11 '16 at 09:22
That plugin doesn't appear to work "locally". The documentation makes it appear to set the header for every site. – Quentin Feb 11 '16 at 09:25
We can define the url patterns. So it will work for all – ashfaq.p Feb 11 '16 at 09:26
how to define the url pattern @ashfaq.p – Suparna Feb 11 '16 at 09:29
Click on the extension icon in your browser and you will see `intercepted url and url patterns` section. There you can add. – ashfaq.p Feb 11 '16 at 09:30
That I got, but my question is, do I need give the local file(base.html)'s path in that or what? – Suparna Feb 11 '16 at 09:36
No. Just give a regex. Although for filesystem ie. `file:///`, there is already a regex added. So just enable it and try. – ashfaq.p Feb 11 '16 at 09:38
still facing the same issue :( – Suparna Feb 11 '16 at 09:40
It working....thanks @ashfaq.p – Suparna Feb 11 '16 at 09:59
Can you mark it as the answer if it helped. – ashfaq.p Feb 11 '16 at 10:07

How to get rid of cross origin request block in chrome?

1 Answers1