在flex (web控件)中使用angularjs时出现跨域错误,并试图加载模板/json(本地文件)
Getting cross-domain errors when using angularjs within flex (web control), and attempting to load templates/json (local files)
让我给你一点关于我要做的事情的历史。
我正在使用一个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控制器获得它的工作。
如果您还没有这样做。尝试为您的应用程序设置一个跨域策略。
这个问题肯定是由于CORS,浏览器强制了这个安全约束。在你的例子中,浏览器是flex web控件。
如果不使用web服务器,您可能无法解决此问题。当对文件发出请求时,跨域资源共享策略将不允许在没有获得服务该文件的主机的事先授权的情况下加载该资源,该授权以http头的形式出现,如以下所示:
Access-Control-Allow-Origin: *
不幸的是,您可能不能。我不知道Flex在它的web控制器中包装了什么引擎,但是你碰到这个的原因是安全。
设置它有很好的理由,它是为了防止JS直接访问您的文件系统。
我建议以下两种解决方法之一:
-
捆绑一个简单的web服务器。例如https://stackoverflow.com/questions/530787/simple-http-web-server
-
修改AngularJS应用(可能还有$routeProvider)来使用新的File API
-
这有点麻烦,但是将模板的所有内容复制到
<script type="text/ng-template" id="some-id"></script>
中的主文件中
另外,您可以尝试使用$http。Jsonp而不是$http。虽然你可能需要修改angularJS代码....
我相信在Flex中至少有两种渲染网页的实现。我很快检查了StageWebView的文档,发现文件://uri方案允许本地xmlhttprequest(基本上是$http。
- 加载文件,然后调用回调函数
- 根据浏览器大小加载文件
- 错误:无法在“XMLHttpRequest”上执行“发送”:无法加载“文件”:AngularJS SPA
- Ajax在mootools中使用来加载文件
- 加载文件时xmlhttp不稳定,如何修复
- Require.js何时加载文件
- 有没有办法在不打包的情况下在 nodejs 上加载文件
- 如何通过从浏览器 js 控制台触发的 require.js 重新加载文件
- 使用jQuery加载文件,计算类的元素并设置间隔比率
- 如何在 AngularJS UI 路由器中从bower_component加载文件
- JavaScript 本地应用程序保存/加载文件
- 如何在特定页面上加载文件
- 内容安全策略不从本地主机加载文件
- Javascript 无法从其他目录加载文件
- Extjs MVC 文件夹结构无法加载文件
- 节点.js - 在运行时加载文件
- nodejs加载文件
- Javascript/AAJAX仅重新加载文件“;onchange”;
- 加载文件,并在特定行之后删除javascript/jquery中的所有剩余行
- 是否可以在非服务页面上使用JS/HTML5 FileReader加载文件