8

Worked on basic routing in angular Js with Code1 mentioned below and getting "XMLHttpRequest cannot load Cross origin requests are only supported for protocol schemes: http, data, chrome-extension, https, chrome-extension-resource" error and founded that we must use local web server to resolve the same and downloaded MAMP and kept my html[login.html] in htdocs folder started the server and replaced templateUrl with [localhostURL/AngularJs/login.html'] as mentioned in Code2 and getting error of Error: [$sce:insecurl] exact error are given below, Guide me with any solution to fix the same in Google Chrome...

Code 1

index.html

<!DOCTYPE html>
 <html>
    <head>
    <title>Test</title>
    </head>
    <body ng-app="plunker">
    <div ng-view=""></div>    
    <script src="angular.min.js"></script>
    <script src="angular-route.js"></script>
    <script src="app.js"></script>  
   </body>
 </html>

app.js

  var app = angular.module('plunker', ['ngRoute']);
  app.config(function ($routeProvider) {
  $routeProvider.when('/login',{
        controller: '',
        templateUrl: 'login.html'
    }).otherwise({ 
        redirectTo: '/login' 
    });
 });

login.html

   Hello from login!

Code2

All other thing are same with changes only in app.js 

   var app = angular.module('plunker', ['ngRoute']);
   app.config(function ($routeProvider) {
   $routeProvider.when('/login',{
        controller: '',
        templateUrl: 'http://localhost:8888/AngularJs/login.html'
    }).otherwise({ 
        redirectTo: '/login' 
    });
});

Error Code1:- XMLHttpRequest cannot load file://localhost/Users/karthicklove/Documents/Aptana%20Studio%203%20Workspace/Object_Javascript/Angular_Js/Routing/login.html. Cross origin requests are only supported for protocol schemes: http, data, chrome-extension, https, chrome-extension-resource.

Error Code2:- [$sce:insecurl] http://errors.angularjs.org/1.2.26/$sce/insecurl?p0=http%3A%2F%2Flocalhost%3A8888%2FAngularJs%2Flogin.html at Error (native)

Improve this question
1
  • In your second code, you don't need to provide the complete url for templateUrl, just provide the html file name. Commented Nov 3, 2014 at 10:18

5 Answers 5

Reset to default
7

I got the similar error. I got a solutions for this, we cannot use Routing in AngularJS by keeping it in your file system. (i.e)file:///C:/Users/path/to/file.html?r=4383065' If you run with this URL you will get error. The route provider will use http protocol. So you have to put your code inside the localhost and then run from browser localhost/foldername/index.html . Don't run it from the folder directly

And also change your template URL like this

     templateUrl: '/AngularJs/login.html'

If you have doubt post here.

Improve this answer
Sign up to request clarification or add additional context in comments.

2 Comments

Can you please suggest me how to create local host
@Kartheeks Just publish your project in to some server like tomcat in your machine. So that you could access it using localhost:portname domain.
2

If you are running a page directly from Chrome (you just double clicked on an html file) and your javascript is trying to request some data you will hit this error.

Reason : $routeProvider uses HTTP service for requesting data and this request cant be sent unless you are using any server like Tomcat.

Solution :

  1. Deploy your app in any server like Tomcat in your machine and open your page through server.

  2. If you think your just playing around with Client-Side coding then better open file in other browsers like Firefox / Safari.

Improve this answer

Comments

0

the issue is probably that you are viewing you page through a different port (port 80 is default http port) yet you are accesssing port 8888 so it would see thee this as a cross origin request and block it think it is potentially a XSS attack or similar.

if you are already on the same port, change the template url to

templateUrl: '/AngularJs/login.html'
Improve this answer

2 Comments

Thanks for your response, tried with changing port to 80 and modifying templateUrl to "templateUrl: '/AngularJs/login.html'" and to localhost/login.html but same issue...
it has to be the same port that you are connecting to, not just port 80
0

Issue mentioned here is resolved by making this as an application i.e when i made this html+angular js page to server dependent and run on server the problem is resolved it works fine in google chrome browser...

Improve this answer

1 Comment

Please make this a comment to your original post. Thanks! :)
0

As other people have said the problem is the $http service from angularjs and you can work around this by hosting a static file web server.

You can do this without much work by using the http-server npm package.

npm install http-server -g

And start your web service like so.

http-server "C:\path\to\project\"

You will see the following output and can browse the app by using one of the displayed urls.

Starting up http-server, serving ./
Available on:
  http://192.168.206.1:8080
  http://192.168.89.1:8080
  http://192.168.7.202:8080
  http://127.0.0.1:8080

http-server is a simple, zero-configuration command-line http server. It is powerful enough for production usage, but it's simple and hackable enough to be used for testing, local development, and learning.

Just be aware that both the web server and the browser now caches your requests.

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.