当我偶然发现一个奇怪的问题时，我开始学习一些AngularJS。
以下代码来自在线教程Github。
虽然它可以在Safari（MAC）上完美运行，但不会在Chrome上加载。当我尝试在Windows的Chrome中打开它时，也会发生同样的事情。
关于Chrome为什么无法使用的任何想法？ Chrome也不会加载AngularJS管理模板（例如，Metronics）。
请注意，当我从文件夹中启动它们时，这些代码某种程度上不起作用，但它们确实起作用（例如，教程中的演示或metronics angular的在线预览）
干杯!
错误信息
XMLHttpRequest无法加载file：///Users/aavelyn/Desktop/untitled%20folder/articles.json。跨源请求仅支持以下协议方案：http，数据，chrome，chrome扩展名，https，chrome-extension-resource。（匿名函数）@ angular.js：10413
json文件是
[
{"id": "1", "name": "Pizza Vegetaria", "price": 5 },
{"id": "2", "name": "Pizza Salami", "price": 5.5 },
{"id": "3", "name": "Pizza Thunfisch", "price": 6 },
{"id": "4", "name": "Aktueller Flyer", "price": 0 }
]
'use strict';
angular.module('tutorialApp', [])
.controller('ArticlesCtrl', function($scope, $http) {
$http.get('articles.json').then(function(articlesResponse) {
$scope.articles = articlesResponse.data;
});
});<html ng-app="tutorialApp">
<head>
<meta charset="utf8" />
<title>AngularJS Tutorial</title>
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<form>
<input type="text" ng-model="search">
<p ng-show="search">Du suchst gerade nach: {{search}}</p>
</form>
<table class="table" ng-controller="ArticlesCtrl">
<tr ng-repeat="article in articles | filter:search">
<td>{{article.id}}</td>
<td>{{article.name}}</td>
<td>{{article.price}}</td>
</tr>
</table>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="app.js"></script>
</body>
</html>最佳答案
浏览器已采取适当的安全措施，以防止通过ajax从文件系统中加载文件。如果要在本地运行，则需要在本地运行某种服务器。您可以在本地安装和运行许多非常简单的服务器。例如，如果安装了nodejs，则可以从命令行使用以下命令安装node-static：
npm install -g node-static
然后，将CD放入文件所在的目录，然后运行：
static
一个简单的服务器将随文件一起在http://localhost:8080运行。
从nodejs.org安装nodejs。有关节点静态的信息位于https://github.com/cloudhead/node-static