Angular Js路由谷歌浏览器问题
Posted
技术标签:
【中文标题】Angular Js路由谷歌浏览器问题【英文标题】：Angular Js Routing Google Chrome Issue 【发布时间】：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文件名即可。 【参考方案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 服务器和浏览器现在都会缓存您的请求。
【讨论】：
以上是关于Angular Js路由谷歌浏览器问题的主要内容，如果未能解决你的问题，请参考以下文章
Web API 2 入门——使用ASP.NET Web API和Angular.js构建单页应用程序（SPA）（谷歌翻译）