How to add Access-Control-Allow-Origin in my service (Ionic)

Question

I am working on an Ionic project and I have written my service. But in my console.log I get the message saying that I dont have "Access-Control-Allow-Origin " in my header.

How to incorporate this in my service?

Here is my service code:

angular.module('Chemicar.services', [])

.service('ChemicarService', function($http, $q){

    var url_youtube = "XXXXXXXXXXXXXXXXXXXX";

    var self = {
        'youtubeVideos' : [],
        'loadYoutubeVideos' : function(){
            var d =  $q.defer();
            $http.get(url_youtube)
            .success(function(data){
                console.log(data);
                self.youtubeVideos = data;

                //create an array to hold the prommisses
                var promisses = [];

                $q.all(promisses).finally(function(){
                    d.resolve('The promise has been fulfilled');
                    //console.log("ˆˆˆˆˆ" , promisses);
                });
            })
            .error(function(msg){
                console.error("There was an error in retrieving the json data " , msg);
                d.reject("The promise was not fulfilled");
            });
            return d.promise;
        }
    };
    return self;
});

My controller code:

angular.module('Chemicar.controllers', ['Chemicar.services'])

.controller('VideoCtrl', function($scope, $http, ChemicarService){

    $scope.youtubeVideos = [];

    ChemicarService.loadYoutubeVideos().then(function success (data){
        $scope.youtubeVideos = ChemicarService.youtubeVideos;
    })

})

They have a post about CORS on their blog: http://blog.ionic.io/handling-cors-issues-in-ionic/ — laszlokiss88, Nov 10 '15 at 14:03

score 1 · Answer 1 · answered Nov 10 '15 at 14:08

1

It's an issue with crossing domains and is cured with CORS (comment above)

For a short term fix (assuming you're using chrome) add the disable-web-security flag to your target-

C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --disable-web-security

answered Nov 10 '15 at 14:08

notAChance

1,360
4
15
47

From what I know it isn't possible to bypass this without access to the server, you'll have to disable-web-security until the header is added/CORS is implemented. – notAChance Nov 10 '15 at 14:14
Also a duplicate - http://stackoverflow.com/questions/20035101/no-access-control-allow-origin-header-is-present-on-the-requested-resource – notAChance Nov 10 '15 at 14:16

score 0 · Answer 2 · answered Nov 10 '15 at 14:09

Ok I read the comments of the following blog -> http://blog.ionic.io/handling-cors-issues-in-ionic/

And I just installed the Allow-Control-Allow-Origin: * plugin as a quick fix. This will of course not work when running on the actual device

So I am still looking for a solution to add the Allow-Control-Allow-Origin into my service via js. Because I can't contact the admin of the api ....

How to add Access-Control-Allow-Origin in my service (Ionic)

2 Answers2