AngularJS不适用于Chrome(Mac和Windows），但适用于Safari

AngularJS not working in Chrome (Mac and Windows) but in Safari

本文关键字：适用于 Windows Safari Mac 不适用 Chrome AngularJS      更新时间：2023-09-26

当我偶然发现一个奇怪的问题时，我开始学习一些AngularJS。

以下代码来自Github的在线教程。

虽然它在Safari（MAC）上运行良好，但不会在Chrome上加载。当我尝试在Windows上的Chrome浏览器中打开它时，也会发生同样的事情。

你知道为什么Chrome不起作用吗？此外，Chrome不会加载AngularJS管理模板（例如Metronics）。

注意，当我从文件夹中启动这些代码时，这些代码不知何故不起作用，但它们确实起作用（例如教程中的演示或metronics angular的在线预览）

干杯！

错误消息

XMLHttpRequest无法加载file:///Users/aavelyn/Desktop/untitled%20folder/articles.json.跨源请求仅支持以下协议方案：http、data、chrome、chrome扩展、https、chrome资源扩展。（匿名函数）@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。有关node-static的信息，请访问https://github.com/cloudhead/node-static

相关文章：