Getting cross-domain errors when using angularjs within flex (web control), and attempting to load templates/json (local files)

Question

Let me give you a bit of history on what I'm trying to do.

I'm using a Flex application, as a container for a web app. So within this Flex app, it has a web controller, which loads a full fledged Angularjs application. All the files are stored locally within the Flex app.

When I attempt to run it, it cannot load any of the templates; they are loaded using the $routeProvider, and data is pulled using the $http.get.

The core problem is that it's not allowing me to pull local files using JavaScript, even though it's being run off the file-system (not using a web server).

I also tested it on Chrome, and have the same exact issue - giving the following error.

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

With Chrome, it can be fixed using --allow-file-access-from-files, but can't figure out how to get it working via the Flex/Flash web controller.

Any help would be greatly appreciated.

Answer 1

Unfortunately, you probably can't. I don't know what engine Flex wraps in it's web controllers, but the reason you are bumping in to this is security.

It's in place for good reason, it's to prevent JS from having direct access to your file system.

I would suggest one of two workarounds.

• Bundle a simple webserver. For example https://stackoverflow.com/questions/530787/simple-http-web-server

• Modify the AngularJS App (and possibly $routeProvider) to use the new File API

• It's a bit of a hassel but copy all the contents of your template in to the main file in <script type="text/ng-template" id="some-id"></script>

Answer 2

If you haven't already done so. Try setting up a crossdomain policy for your application.

The problem is definitely due to CORS, the browser enforces this security constraint. In your case the browser is the flex web control.

You may not be able to get around this problem without using a web server. When the request is made for a file, the Cross Origin Resource Sharing policy will not allow the resource to be loaded without prior authorization from the host serving the file, This authorization comes in the form of an http header such as the following:

Access-Control-Allow-Origin: *

Answer 3

Also, you could try to use $http.jsonp instead of $http.get, although you may have to change angularJS code....

Answer 4

I believe there are at least 2 implementations of rendering a webpage within Flex. I quickly checked the docs for StageWebView and found that the file:// uri scheme allows for Local XMLHttpRequests (basically what $http.get is doing).