"XMLHttpRequest cannot load" ERROR?

Question

Here is the full error

XMLHttpRequest cannot load http://urbanetradio.com/wp-json/posts. The 'Access-Control-Allow-Origin' header has a value 'http://localhost:8100' that is not equal to the supplied origin. Origin 'http://run.plnkr.co' is therefore not allowed access.

now, I see in a lot of posts about Access-Control-Allow-Origin but nobody says how to put that into your app, I am using Firebase as a Back-End.

Here is a jsbin or a Plunker just in case that you want to see the error, in jsbin do not open the console within the app, open the browser console.

Here is what I am doing

.config(function($stateProvider, $urlRouterProvider) {

  $stateProvider
    .state('tabs', {
      url: "/tabs",
      abstract: true,
      templateUrl: "tabs.html"
    })
    .state('tabs.news', {
      url: "/news",
      views: {
        'tab-news': {
          templateUrl: "tab-news.html",
          controller: 'NewsCtrl'
        }
      }
    })
   $urlRouterProvider.otherwise("/tabs/news");
})

.controller('NewsCtrl', function($scope,
                                 FreshlyPressed) {
  $scope.posts = [];
  $scope.doRefresh = function() {
    $scope.posts = FreshlyPressed.getBlogs($scope);
    $scope.$broadcast('scroll.refreshComplete');
  }
  $scope.doRefresh();
})

.service('FreshlyPressed', function($http) {
  return {
    getBlogs: function($scope) {
      $http.get('http://urbanetradio.com/wp-json/posts')
        .success(function(result) {
          $scope.posts = result;
        });
    }
  }
})

I am doing a get request to a wordpress account to get the posts. This is a mobile app, when I test the app in the web browser everything works fine, but when I try to open that app in my mobile, then the error comes up and I can't see the posts

here is the app just in case you want to test it

so what do you think I can do here ? where do I have to put the Access-Control-Allow-Origin: * ?

Check this: http://stackoverflow.com/questions/30180507/cross-domain-url/30180726#30180726 — Tuan Anh Hoang-Vu, May 12 '15 at 16:58
The 3rd party site needs to support CORS, if they do not, than only option is a proxy. — epascarello, Oct 02 '15 at 15:22

score 2 · Accepted Answer · answered Oct 02 '15 at 15:09

Replace $http.get('http://urbanetradio.com/wp-json/posts') with $http.jsonp('http://urbanetradio.com/wp-json/posts') and try if the host supports JSONP instead of the "less secured" Simple JSON requests. Most API servers support that, and it overcomes the Access-Control-Allow-Origin header errors.

"XMLHttpRequest cannot load" ERROR?

1 Answers1