Ionic App not able to submit get Request

I have been struggling to submit a simple get request to google places api

https://maps.googleapis.com/maps/api/place/nearbysearch/json?location=-33.8670522,151.1957362&radius=500&types=food&name=cruise&key=xxxx

I keep on getting an error: XMLHttpRequest cannot load https://maps.googleapis.com/maps/api/place/nearbysearch/json?location=-33.8…ius=500&types=food&name=cruise&key=xxxx. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin '8100' is therefore not allowed access.

I looked this up online and it has something to do with CORS but I havent been able to figure anything out. If someone could point me in the right direction that would be great.

thanks

I was able to call that url restfully using ionic.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width" />
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
    <link href="components/lib/ionic/css/ionic.css" rel="stylesheet" />
    <script src="components/lib/ionic/js/ionic.bundle.js"></script>
    <script src="components/lib/ionic/js/angular/angular-resource.js"></script>
    <script type="text/javascript">
        angular.module('myApp',
[
 'ionic',
 'ngResource'
])
.factory('GetData', function ($resource)
{
    return {
        getg: function ()
        {
            return $resource('https://maps.googleapis.com/maps/api/place/nearbysearch/json?location=-33.8670522,151.1957362&radius=500&types=food&name=cruise&key=xxxx', null).get();
        }
    }
})
.controller('SomeController', function (GetData)
{
    GetData.getg().$promise.then(
        function (answer)
        {
            console.log(answer);
        });
});
    </script>
</head>
    <body ng-app="myApp" ng-controller="SomeController"></body>
</html>

What worked for me was to install this addon:

  • cordova-plugin-whitelist

Console:

cordova plugin add cordova-plugin-whitelist