Ionic, Phonegap, AngularJs : local storage undefined key when emulating - angularjs

Question

I just built a simple application calling a rest api built with symfony and secured with fos_oauth.
I have a AuthService that return an access token that allow my mobile application to access to my api.
It is stored in local storage :
On my browser using ionic serve (similar to phonegap serve) the application is perfectly working and i can access to my variable stored locally. When emulating with ios, it is perfectly working. But when emulating with android or displaying my app on my phone with phonegap app. I can't access to those variables. Does that sound normal to you?
[phonegap] 404 http://ynd.dev/api/login?access_token=undefined
index.html :
<!-- Utils -->
<script src="js/service/LocalStorageService.js"></script>
<!-- JS Config -->
<script src="js/functions.js"></script>
<script src="js/config/parameters.js"></script>
<!-- your app's js -->
<script src="js/app.js"></script>
<script src="js/config/routing.js"></script>
<script src="js/service/AuthService.js"></script>
LocalStorageService.js :
setObject: function(key, value) {
$window.localStorage.setItem(key, JSON.stringify(value));
},
getObject: function(key) {
return JSON.parse($window.localStorage.getItem(key) || '{}');
}
parameters.js :
// Resources
var domain = 'http://ynd.dev';
var public_id = '4_4spkzm1pubcw40og04okk4wogs0cc44wkgkkoco88k8cwgkwgs';
var secret = '28es09ymlcg0wgskgs4cso0co0ok0ww0gw8g0k8g4kcowckcco';
// Access token
var access_token = '';
var identity_token = '';
app.js :
var app = angular.module('ionicApp', ['ionic', 'ionic.utils', 'ngResource']);
app.run(function($ionicPlatform,$rootScope, $localStorage, $location, AuthService) {
$ionicPlatform.ready(function() {
// Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
// for form inputs)
if(window.cordova && window.cordova.plugins.Keyboard) {
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
}
if(window.StatusBar) {
StatusBar.styleDefault();
}
access_token = $localStorage.getObject('access_token');
identity_token = $localStorage.getObject('identity_token');
AuthService.token();
});
$rootScope.$on('$stateChangeStart', function (event, next) {
access_token = $localStorage.getObject('access_token');
identity_token = $localStorage.getObject('identity_token');
AuthService.token();
// IF no user logged
if(isObjectEmpty(identity_token)){
$location.path( "/login" );
}
});
});
AuthService:
This is how the object is stored in local.
$localStorage.setObject('access_token', {
key: res.data.access_token,
type: 'anonymous',
expires_at: Date.now()+(res.data.expires_in*1000)
});
Any ideas or hints?
UPDATE : (CORS)
allow_origin: ['*']
allow_headers: ['*']
allow_methods: ['POST', 'PUT', 'GET', 'DELETE', 'OPTIONS']

Answer 1

When using the app within Phonegap the application is called from the file system, thus runs on the file:// protocol. When you wan to call your server, you will need to use JSONP or CORS headers on your server to make a successful connection, as otherwise cross-domain security policies will arise.

Answer 2

It was simply not working because the emulated application does not access the localhost.
First solution :
Call the api from an online host.
Second solution :
Instead of calling http://localhost/ Call the IP (You can get it with a ifconfig, for myself i used ifconfig vboxnet0).
For vitual host i have not figure it out.