Angular Js路由谷歌浏览器问题答案

【问题标题】：Angular Js Routing Google Chrome IssueAngular Js路由谷歌浏览器问题
【发布时间】：2014-12-29 23:22:38
【问题描述】：

使用下面提到的 Code1 处理 Angular Js 中的基本路由并获得“XMLHttpRequest 无法加载跨源请求仅支持协议方案：http、data、chrome-extension、https、chrome-extension-resource" 错误并发现我们必须使用本地 Web 服务器来解决相同的问题并下载 MAMP 并将我的 html[login.html] 保存在 htdocs 文件夹中启动服务器并将 templateUrl 替换为 [localhostURL/AngularJs/login.html'] 作为在 Code2 中提到并得到 Error: [$sce: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!

代码2

所有其他的东西都是一样的，只是在 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：- [$sce:insecurl] http://errors.angularjs.org/1.2.26/$sce/insecurl?p0=http%3A%2F%2Flocalhost%3A8888%2FAngularJs%2Flogin.html 出现错误（本机）

【问题讨论】：

在您的第二个代码中，您无需提供完整的templateUrl url，只需提供html文件名即可。

标签： angularjs cross-domain angular-ui-router

【解决方案1】：

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

并且还像这样更改您的模板网址

     templateUrl: '/AngularJs/login.html'

如果您有疑问，请在此处发布。

【讨论】：

你能建议我如何创建本地主机
@Kartheeks 只需将您的项目发布到您机器中的某个服务器上，例如tomcat。这样您就可以使用localhost:portname 域访问它。

【解决方案2】：

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

原因： $routeProvider 使用 HTTP 服务来请求数据，除非您使用像 Tomcat 这样的任何服务器，否则无法发送此请求。

解决方案：

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

【讨论】：

【解决方案3】：

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

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

templateUrl: '/AngularJs/login.html'

【讨论】：

感谢您的回复，尝试将端口更改为 80 并将 templateUrl 修改为 "templateUrl: '/AngularJs/login.html'" 和 localhost/login.html 但同样的问题...
它必须与您连接的端口相同，而不仅仅是端口 80

【解决方案4】：

这里提到的问题是通过将其作为应用程序解决的，即当我将此 html+angular js 页面设置为依赖于服务器并在服务器上运行时，问题已解决，它在 google chrome 浏览器中运行良好...

【讨论】：

请对您的原始帖子发表评论。谢谢！ :)

【解决方案5】：

正如其他人所说，问题是来自 angularjs 的 $http 服务，您可以通过托管静态文件 Web 服务器来解决此问题。

您可以使用http-server npm 包轻松完成此操作。

npm install http-server -g

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

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

您将看到以下输出，并可以使用显示的网址之一浏览应用程序。

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 服务器和浏览器现在都会缓存您的请求。

【讨论】：