CODEWITHSUNDEEP
angularjs
MED.HACEN
MED.HACEN

Reputation: 19

AngularJS error Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource

I'am traying to navigate between to pages with angularJS but when i open the main page with my browser it doesn't display anything when i look in the console i see this error :

Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.

here is my code:

ViewsTestPage:

<html>
<head>
    <title>Views Test</title>
    <script src="angular.min.js"></script>
    <script  src="angular-route.min.js"></script>
    <script  src="controller.js"></script>
</head>
<body ng-app="myApp">
    <div ng-view></div>
</body>
</html>

the controller.js:

var mainApp = angular.module('myApp', ['ngRoute']);

mainApp.config(function($routeProvider){
    $routeProvider
    .when('/', {
        templateUrl: 'UsersPage.html'

    })

   .when('/helloUser', {
    templateUrl: 'hello.html'
})
.otherwise({
    redirectTo: '/'
});

});

UsersPage :

Hello world <a href="#/helloUser">Hi users</a>

hello.html

 <h1> Users Page</h1>

any help please i'am begginner!!!!

Upvotes: 0

Views: 5131

Answers (2)

Vivek
Vivek

Reputation: 332

From this answer from a similar question which has already been shared

  1. Install Node.js
  2. Run npm install http-server -g and then start http-server C:\location\to\app.
  3. you will get the server address. For eg, 10.122.32.213:6060 (have put a random address)
  4. Use the above obtained address to link your file.
  5. in your case templateUrl: 'http://10.122.32.213:6060/UsersPage.html'

Hope this helps!

Upvotes: 1

sumair
sumair

Reputation: 386

This error is happening because you are just opening html documents directly from the browser. To fix this you will need to serve your code from a webserver and access it on localhost. If you have Apache setup, use it to serve your files. Some IDE's have built in web servers, like JetBrains IDE's, Eclipse.. If you have webstorm then you can open it from webstorm.

If you have Node.Js setup then you can use http-server. Just run npm install http-server -g and you will be able to use it in terminal like http-server C:\location\to\app.

Upvotes: 0

Related Questions