Ad

XMLHttpRequest Cannot Load File:///C:/

- 1 answer

My app, which works in plunker, does not work locally. It returns the following error:

XMLHttpRequest cannot load file:///C:/Amanuel/Coding/Angular.Js/page.html. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.

Why am I receiving this error?

index.html:

<!DOCTYPE html>
<html lang= "en">

<head>
    <meta charset="UTF-8" />
    <title>Angular Js</title>
    <script data-require="[email protected]" src="https://code.angularjs.org/1.4.8/angular.js" data-semver="1.4.8"></script>
    <script src = "https://rawgit.com/nirus/Angular-Route-Injector/master/dist/routeInjector.js"></script>
    <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular-route.js"></script>
    <script type="text/javascript" src="main.js"></script>
</head>

<body ng-app = "app">
  <div ng-view></div>
</body>
</html>

page.html:

Hello World

main.js:

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

app.config(function($routeProvider){

  $routeProvider.when('/', {
    templateUrl: 'page.html'

  })

  .when('/helloUser', {
      template: "ds"

  })

  .otherwise({
    redirectTo: '/'
  })

})

Here is a screenshot of the console:

enter image description here

Ad

Answer

Angular router implementation uses ajax for downloading template files. This doesnt work when we open the file directly. You need to start a server and open file from server for this to work.

You can use any server you like. Easiest that I do is install a http-server npm module and start server from the project directory like following.

If you already have node and npm installed. On command line do following.

npm install -g http-server

In project directory

http-server
Ad
source: stackoverflow.com
Ad