Cross-origin-requests in Angular.js

Question

I got an angular.js app that has to run on client-only and needs to fetch some data from different json files.

I already tried different solutions to enable CORS, without success.

app.js

var myApp = angular.module('MyApp', [
    'ngRoute',
    'myControllers'
]);

myApp.config(function($httpProvider) {
    //Enable cross domain calls
    $httpProvider.defaults.useXDomain = true;

    //Remove the header used to identify ajax call  that would prevent CORS from working
    delete $httpProvider.defaults.headers.common['X-Requested-With'];
});

controllers.js

/* Controllers */
var myControllers = angular.module('myControllers', []);

myControllers.controller('NavigationController', ['$scope', '$http',
  function ($scope, $http) {
    $http.get('json/data.json').success(function(data) {
      $scope.data = data;
    });
  }]);
...

Error in console

XMLHttpRequest cannot load file:///.../json/data.json. Cross origin requests are only supported for HTTP.

Any help is appreciated, I have to make this app running on chrome and IE as well, without running on a local server.

*"The problem is that most browsers (firefox excluded) do not support cross-origin-requests for security reasons."* Wat? All modern browsers and IE8+ support CORS requests. — Kevin B, Jun 27 '14 at 14:27
Your best bet is to instead use JSONP in this case, since the filesystem won't return CORS headers. That or include a minimal webserver in your application. — Kevin B, Jun 27 '14 at 14:30
@kevinB I updated the question. However, the jsonp solution did not work and I still cannot use a webserver — Martin Golpashin, Jun 27 '14 at 14:52
i can tell you without a doubt that a cors solution will not work. your only option is to not use ajax at all, by either using jsonp or a script include. — Kevin B, Jun 27 '14 at 14:53

score 1 · Accepted Answer · answered Jun 27 '14 at 14:14

1

I had to do something like this. In the end I just had to put the data as objects directly in a script file and then load it in with the other scripts. That way the app didn't need to make AJAX requests so CORS didn't come into it.

It's not ideal - but it worked....

answered Jun 27 '14 at 14:14

PokeItWithAStick

316
2
9

This worked! I also included all the templates in the index.html as described here https://github.com/angular/angular.js/issues/6603 – Martin Golpashin Jun 27 '14 at 15:25

Cross-origin-requests in Angular.js

1 Answers1