在flex（Web控件）中使用angularjs并尝试加载templates / json（本地文件）时出现跨域错误

Question

让我告诉你一些关于我正在做什么的历史。

我正在使用Flex应用程序，作为Web应用程序的容器。 因此，在这个Flex应用程序中，它有一个Web控制器，可以加载一个完整的Angularjs应用程序。 所有文件都存储在Flex应用程序中。

当我尝试运行它时，它无法加载任何模板; 它们使用$ routeProvider加载，并使用$ http.get拉取数据。

核心问题是它不允许我使用JavaScript来提取本地文件，即使它是从文件系统（不使用Web服务器）运行的。

我也在Chrome上测试了它，并且具有相同的问题 - 给出以下错误。

Origin null is not allowed by Access-Control-Allow-Origin.

使用Chrome，可以使用--allow-file-access-from-files修复它，但无法弄清楚如何通过Flex / Flash Web控制器使其工作。

任何帮助将不胜感激。

Answer 1

如果你还没有这样做的话。 尝试为您的应用程序设置跨域策略。

问题肯定是由于CORS ，浏览器强制执行此安全约束。 在您的情况下，浏览器是flex web控件。

如果不使用Web服务器，您可能无法解决此问题。 当对文件发出请求时，跨源资源共享策略将不允许在未事先授权的情况下从提供文件的主机加载资源。此授权以http头的形式出现，如下所示：

Access-Control-Allow-Origin: *

Answer 2

不幸的是，你可能不会。 我不知道Flex包含在它的Web控制器中的引擎是什么，但是你碰到这个的原因是安全性。

它有充分的理由，这是为了防止JS直接访问您的文件系统。

我建议使用两种解决方法之一。

• 捆绑一个简单的网络服务器。 例如https://stackoverflow.com/questions/530787/simple-http-web-server

• 修改AngularJS App（可能还有$ routeProvider）以使用新的File API

• 这有点像哈希，但是将模板的所有内容复制到主文件中<script type="text/ng-template" id="some-id"></script>

Answer 3

此外，您可以尝试使用$ http.jsonp而不是$ http.get，尽管您可能需要更改angularJS代码....

Answer 4

我相信在Flex中至少有两种渲染网页的实现。 我快速检查了StageWebView的文档，发现file：// uri方案允许本地XMLHttpRequests（基本上是$ http.get正在做什么）。