Angular Js路由Google Chrome问题

使用下面提到的Code1在angular Js中进行基本路由，并得到"XMLHttpRequest无法加载跨源请求仅支持协议方案：http、data、chrome扩展、https、chrome延伸资源"错误，发现我们必须使用本地web服务器来解决相同的问题，并下载了MAMP，并将我的html[login.html]保留在htdocs文件夹启动了服务器，并将templateUrl替换为[localhostURL/AngularJs/login.html']，如代码2中所述，并获得错误错误：[$se:insecurl]下面给出了确切的错误，请指导我在Google Chrome中使用任何解决方案来修复此问题。。。

代码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

所有其他事情都是一样的，只在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' 
    });
});

错误代码1：-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.

错误代码2：-[$se:insecurl]http://errors.angularjs.org/1.2.26/$sce/不卷曲？p0=http%3A%2F%2localhost%3A888%2AngularJs%2Login.html错误（本机）

我得到了类似的错误。我有一个解决方案，我们不能通过将路由保存在您的文件系统中来使用AngularJS中的路由。（即）file:///C:/Users/path/to/file.html?r=4383065"如果使用此URL运行，则会出现错误。路由提供程序将使用http协议。因此，您必须将代码放在localhost中，然后从浏览器localhost/foldername/index.html运行。不要直接从文件夹运行它

还可以像这个一样更改你的模板URL

     templateUrl: '/AngularJs/login.html'

如果你有疑问，请在这里发帖。

如果你直接从Chrome运行页面（你只是双击了一个html文件），而你的javascript试图请求一些数据，你会遇到这个错误。

原因：$routeProvider使用HTTP服务请求数据，除非您使用Tomcat之类的服务器，否则无法发送此请求。

解决方案：

在机器中的任何服务器（如Tomcat）中部署应用程序，并通过服务器打开页面。
如果你认为你只是在玩客户端编码，那么最好在其他浏览器中打开文件，比如Firefox/Safari。

问题可能是您通过不同的端口（端口80是默认的http端口）查看页面，但您正在访问端口8888，因此它会将此视为跨源请求并阻止它，认为这可能是XSS攻击或类似攻击。

如果您已经在同一个端口上，请将模板url更改为

templateUrl: '/AngularJs/login.html'

这里提到的问题是通过将其作为一个应用程序来解决的，即当我将这个html+angular js页面制作为依赖服务器并在服务器上运行时，问题得到了解决，它在谷歌chrome浏览器中运行良好。。。

正如其他人所说，问题在于angularjs的$http服务，您可以通过托管静态文件web服务器来解决这个问题。

通过使用http-server npm包，您可以在不需要太多工作的情况下完成此操作。

npm install http-server -g

然后像这样启动你的网络服务。

http-server "C:pathtoproject"

您将看到以下输出，并可以使用其中一个显示的URL浏览应用程序。

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是一个简单的、零配置的命令行http服务器。它对于生产使用来说足够强大，但它足够简单和可破解，可以用于测试、本地开发和学习。

请注意，web服务器和浏览器现在都会缓存您的请求

相关内容

最新更新

热门标签：