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'
      })
  })

当我尝试在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.

我的浏览器窗口中的网址和错误中的网址似乎是同一个网址。是否因为Angular使用HTTP请求来获取this answer中指示的模板？它们似乎不是类似的问题，因为除了提供模板的localhost之外，它不应该是一个不同的域。

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，然后将app根目录放在/ Applications / Mamp / htdocs文件夹中。然后默认情况下localhost：8888 / app-name /当Mamp打开并运行时。

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

2 个答案: