在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正在做什么）。