加载模板时出现 AngularJS、Localhost 和 CORS 错误答案

【问题标题】：AngularJS, Localhost, and CORS errors when loading a template加载模板时出现 AngularJS、Localhost 和 CORS 错误
【发布时间】：2015-02-08 04:28:44
【问题描述】：

我正在尝试使用 Angular 的 ui-router 加载模板。

index.html

<html ng-app="someApp">
<body ng-controller='SomeCtrl'>
        <div ui-view>
        </div>
</body>

app.js

angular.module('someApp', [])

.config(function($stateProvider){
    $stateProvider
      .state('someApp', {
        url:"/",
        templateUrl: 'app/things/things.tmpl.html',
        controller: 'SomeCtrl'
      })
  })

当我尝试在 localhost 中转到应用程序的根目录时（将 html 文件拖放到浏览器中），我收到了 CORS 错误：

XMLHttpRequest cannot load file://localhost/Users/me/theApp/src/app/things/things.tmpl.html. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.

我的浏览器窗口中的 url 和错误中的 url 似乎是一回事。是因为 Angular 使用 HTTP 请求来获取 this answer 中指示的模板吗？它们似乎不是类似的问题，因为除了为模板提供服务的 localhost 之外，不应有其他域。

【问题讨论】：

Chrome 不允许您加载这样的文件，您需要在服务器（apache、node、python、IIS 等）中提供您的应用程序。

标签： javascript angularjs cors

【解决方案1】：

是的，100% 至少需要一个本地服务器运行。 MAMP 可能是最简单的。 http://www.mamp.info/en/

进行 Mac 安装，然后将应用根目录放在 /Applications/Mamp/htdocs 文件夹中。然后在 Mamp 打开并运行时默认为 localhost:8888/app-name/。

【讨论】：

【解决方案2】：

@Tom 是完全正确的——你不能以这种方式在 Chrome 中加载文件。我必须启动一个 http 服务器。

我跟随these directions 安装http-server 并使用以下方式启动服务器：

http-server -a localhost -p 8000

这允许应用程序和我的模板正确加载。

【讨论】：