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

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: *