How to get rid of cross origin request block in chrome?
<p>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 --></p>

<p>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.</p>

<p>Error: [$compile:tpload] <a href="http://errors.angularjs.org/1.5.0-rc.0/" rel="nofollow">http://errors.angularjs.org/1.5.0-rc.0/</a>$compile/tpload?p0=baseChild1.html&amp;p1=-1&amp;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)</p>

<p><strong>Base.html</strong></p>

<pre><code>&lt;!DOCTYPE html&gt;
&lt;html ng-app="iAXApp"&gt;

  &lt;head&gt;
    &lt;meta charset="utf-8" /&gt;
    &lt;title&gt;IONOS iAX&lt;/title&gt;

    &lt;!-- &lt;link rel="stylesheet" type="text/css" href="base.css"&gt; --&gt;

    &lt;script src="angular.min.js"&gt;&lt;/script&gt;
    &lt;script src="base.js"&gt;&lt;/script&gt;

  &lt;/head&gt;
  &lt;body ng-controller="MainCtrl"&gt;

      &lt;main-directive&gt;&lt;/main-directive&gt;

  &lt;/body&gt;

&lt;/html&gt;
</code></pre>

<p><strong>base.js</strong></p>

<pre><code>var app = angular.module('iAXApp', []);

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


});

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

<p><strong>baseChild1.html</strong></p>

<pre><code>&lt;h1&gt;{{name}}&lt;/h1&gt;
</code></pre>