Angular Js Routing Google Chrome Issue

2019-06-17 01:42发布

问题:

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)

回答1:

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.



回答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.



回答3:

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'


回答4:

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



回答5:

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.