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

AngularJS, Localhost, and CORS errors when loading a template

本文关键字：Localhost CORS 错误 AngularJS 加载      更新时间：2023-09-26

我正在尝试使用Angular的ui路由器加载模板。

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请求来获取这个答案中所示的模板吗？它们似乎不是类似的问题，因为除了localhost之外，不应该有其他域为模板提供服务。

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

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

@Tom说得很对——你不能用这种方式在Chrome中加载文件。我不得不启动一个http服务器。

我按照以下说明安装http服务器，并使用启动服务器

http-server -a localhost -p 8000

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

相关文章：