跨源请求仅支持 HTTP
Posted
技术标签:
【中文标题】跨源请求仅支持 HTTP【英文标题】：Cross origin requests are only supported for HTTP 【发布时间】：2013-11-19 18:23:13 【问题描述】：我正在尝试运行此代码：
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<title>Exemple 06</title>
</head>
<body>
<!-- Diretiva ng-repeat -->
<div ng-controller="MyController">
<a ng-href="#/">Page 1</a> | <a ng-href="#/p2">Page 2</a>
<div ng-view="#/p2"></div>
</div>
<script src="js/angular.js"></script>
<script src="js/angular-route.js"></script>
<script type="text/javascript">
var myApp = angular.module('myApp', ['ngRoute']);
myApp.config(function($routeProvider)
$routeProvider
.when('/' , controller: 'MyController', templateUrl: 'p1.html')
.when('/p2', controller: 'MyController', templateUrl: 'p2.html')
.otherwise( redirectTo: '/');
);
myApp.controller('MyController', function($scope)
$scope.nomes = [
id: 1, nome: 'Arthur',
id: 2, nome: 'Portos',
id: 3, nome: 'Aramis'
];
);
</script>
</body>
但出现以下错误：
XMLHttpRequest 无法加载文件：///home/93579551515/Desktop/Angular/p1.html。仅 HTTP 支持跨源请求。
我不想在网络服务器上运行它。
【问题讨论】：
您可以像python -mSimpleHTTPServer 一样轻松地在本地启动网络服务器，然后将浏览器指向localhost:8000/index.html。
出于好奇..你为什么不想运行一个网络服务器？
在括号中运行它（brackets.io），它会工作。
【参考方案1】：
您可以在index.html 中添加诸如p1.html 和p2.html 之类的模板，方法是将它们放在script 标记中，例如mentioned in the docs。
<script type="text/ng-template" id="p1.html">
This is the content of the template
</script>
然后angular 将不再需要发出 AJAX 请求来获取它们。
请注意，这些script 元素必须出现在 ng-app 之后。
【讨论】：
如果我可以编写一个脚本来收集我所有的视图文件并将它们注入到主页底部的脚本标签中，那就太棒了。有谁知道这样的脚本是否存在或者我将如何制作它？ 我在使用这样的模板时收到此错误，模板仍然可以正常工作，但它会将错误发送到控制台。【参考方案2】：我在 Chrome 中遇到了同样的问题，如果您使用的是 Chrome，您可以在 Chrome 中禁用同源策略。启动 Chrome 运行：
$ google-chrome --disable-web-security
这里是more detail。
【讨论】：
【参考方案3】：路由提供程序使用 http 协议，这就是为什么如果您直接从文件夹运行此代码，您将遇到跨源问题。
将您的文件夹保存在像 localhost/route 这样的服务器上并运行它。
提供参考路径，如 templateUrl: '/p1.html'
【讨论】：
以上是关于跨源请求仅支持 HTTP的主要内容，如果未能解决你的问题，请参考以下文章