javascript - 在 flex（Web 控件）中使用 angularjs 并尝试加载模板/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 网络控制器使其工作。

任何帮助将不胜感激。

score 2 · Accepted Answer

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

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

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

Access-Control-Allow-Origin: *

score 1 · Accepted Answer

不幸的是，你可能做不到。我不知道 Flex 在它的 Web 控制器中包装了什么引擎，但您遇到此问题的原因是安全性。

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

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

捆绑一个简单的网络服务器。例如https://stackoverflow.com/questions/530787/simple-http-web-server
修改 AngularJS 应用程序（可能还有 $routeProvider）以使用新的文件 API
这有点麻烦，但将模板的所有内容复制到主文件中<script type="text/ng-template" id="some-id"></script>

score 0 · Accepted Answer

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

score 0 · Accepted Answer

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

4 回答 4