Ionic Framework won't authenticate in browser (works in emulator)

Question

I've set up a simple Ionic Framework app which utilises Drupal 7 Services API to authenticate a user, before hitting some custom end points to retrieve data when logged in.

The issue I'm seeing is when running ionic serve to view the app in the browser: http://localhost:8100/#/auth/login. I can successfully log in, but when requesting an endpoint, the user is not detected as authenticated.

1. Logging in successfully - see log debug:
2. However, when trying to access a custom end point - the user doesn't appear to be authenticated - the dblog reveals Anonymous (not verified), thus returning ["Access denied for user anonymous"] in the console. The dblog looks like so:

The odd thing is, if performing the exact same steps using POSTMAN or via the iOS emulator when running ionic emulate ios all works fine, see dblog now (this is when using emulator):

More info: I'm using the Drupal CORS module, with the following set up: api/*|http://localhost:8100|*|Content-Type,X-CSRF-Token,Authentication, Origin, Cookie|true

On each request I'm passing the X-CSRF-Token. I can't pass a Cookie as the console returns 'Refused to set unsafe header "Cookie"

My $http request looks as follows:

  this.getEventFeed = function(csrf, payload) {
    var api = FetchGlobals.getUrl();
    var deferred = $q.defer();
    var req = {
     method: 'POST',
     url: api + '/api/rest/event_feed/feed.json',
     headers: {
      'X-CSRF-Token' : csrf,
      'Access-Control-Allow-Credentials' : 'true',
      // 'Cookie' : cookie,
      'Authentication' : cookie
     },
     data: payload,
     // json : true,
    }
    console.log(req);
    $http(req)
    .success(function(data, status, headers, config) {
      var response = {
        'ok' : true,
        'data' : data,
      };
      deferred.resolve(response);
    })
    .error(function(data, status, headers, config) {
      var response = {
        'status' : status,
        'data' : data,
      };
      deferred.resolve(response);
    });
    return deferred.promise;
  };

EDIT: It appears to be an issue with the Cookie. As recommended here: https://www.drupal.org/node/1133084#comment-8433677 - I've added a new header called Authentication. I can see from the dblog the user is succesfully being authenticated, however, I receive the error ["CSRF validation failed"].

Answer 1

Incase someone faces a similar issue, I managed to find a fix by:

1. Setting up an ionic proxy see: http://blog.ionic.io/handling-cors-issues-in-ionic/

2. Sending the Cookie with the headers as Authentication to bypass the issue 'Refused to set unsafe header "Cookie. Then adding this code on hook_init() https://www.drupal.org/node/1133084#comment-8433677.