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

Question

我正在尝试使用 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'
      })
  })

当我尝试转到本地主机中应用程序的根目录（将 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.

我浏览器中的urlwindow和报错中的url好像是一个。是否因为 Angular 使用 HTTP 请求来获取 this answer 中指示的模板？它们似乎不是类似的问题，因为除了为模板提供服务的本地主机之外，不应该有其他域。

Answer 1

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

我按照 these directions 安装 http-server 并使用以下命令启动服务器：

http-server -a localhost -p 8000

这使得应用程序和我的模板能够正确加载。

Answer 2

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

执行 Mac 安装，然后将应用根目录放入 /Applications/Mamp/htdocs 文件夹中。那么默认情况下是 localhost:8888/app-name/ 当 Mamp 打开时运行。

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

AngularJS, Localhost, and CORS errors when loading a template

javascript

cors

angularjs