CODEWITHSUNDEEP
javascriptangularjsgoogle-chrome
jorgeregidor
jorgeregidor

Reputation: 208

Can't open Angular app using file protocol in Chrome

Hi i have a problem with angularjs and chrome, this is the code:

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

   // Configuración de las rutas
   .config(function($routeProvider) 
   {

 $routeProvider
    .when('/', {
        templateUrl : 'pages/home.html',
        controller  : 'mainController'
    })
    .when('/artistas', {
        templateUrl : 'pages/artistas.html',
        controller  : 'artistasController'
    })
    .when('/login', {
        templateUrl : 'pages/login.html',
        controller  : 'loginController'
    })
    .otherwise({
        redirectTo: '/'
    });
    });

If i open the index.html with Opera, Firefox or safary i dont have any proble, but if i open this with Chorme dont work the routerprovider and show me a error message in the console like this:

XMLHttpRequest cannot load file://localhost/Users/multivideo/Desktop/FTL-Angular/pages/home.html. Cross origin requests are only supported for HTTP. index.html:1

Error: A network error occurred.
at Error (native)
at https://ajax.googleapis.com/ajax/libs/angularjs/1.2.8/angular.min.js:72:206
at C (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.8/angular.min.js:68:99)
at f (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.8/angular.min.js:66:69)
at C (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.8/angular.min.js:92:375)
at C (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.8/angular.min.js:92:375)
at https://ajax.googleapis.com/ajax/libs/angularjs/1.2.8/angular.min.js:94:28
at h.$eval (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.8/angular.min.js:102:293)
at h.$digest (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.8/angular.min.js:100:50)
at h.$apply (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.8/angular.min.js:103:100) angular.js:9413

Upvotes: 4

Views: 4781

Answers (3)

schoeffman
schoeffman

Reputation: 486

In addition to @Chris vCB's answer, you can use php if you want instead with 

php -S localhost:8080

(or whatever domain::port you wish)

Upvotes: 0

Eduard Gamonal
Eduard Gamonal

Reputation: 8031

you should have a web server running. opening it with file:// will enable protection in some browsers that will prevent you from running parts of the code, for example ajax calls.

The best solution is running a webserver, specially because angular comes with one. For example I use yeoman and I can run grunt serve. Moar here https://docs.angularjs.org/tutorial/step_00

Another option is setting up chrome to allow XHR with the file protocol Allow Google Chrome to use XMLHttpRequest to load a URL from a local file

Upvotes: 3

Chris vCB
Chris vCB

Reputation: 1053

Chrome uses a fairly stringent same-origin policy. There are two things you can do:

1) You should not normally develop from file://. Use MAMP, your built-in Apache web server or some other way to set up a local web server. If you are on a Mac, as I surmise from the path you provide, you can launch a very simple Python-based http server by opening up terminal and entering

$> python -m SimpleHTTPServer 8080

This will open a simple HTTP server on port 8080 from the folder you invoked it from.

2) You can, but you really should not, relax your safety settings for Chrome. This is possible, but generally bad practice.

Upvotes: 7

Related Questions