Ionic App using Restangular - Node Express potential CORS issue


#1

I have an Ionic App that I am using Restangular to communicate with a node express server application.

Everything is working when I have the node express application configured to use http.

Ionic App side:

RestangularProvider.setBaseUrl('http://11.22.33.44:3000');

// custom header
interceptors.serialNumber = function (element, operation, what, url, headers, query) {
  return {
    headers: angular.extend({
      'x-serialnumber': deviceStore.serialNumber
    }, headers)
  };
};

Restangular.one(‘Admin’).get()
 .then(function (data) {
    console.log(data);
   }, function (error) {
   console.log(error);
 });

Node Express App side:

var app = express();
app.use(cors());
app.get('/Admin, function(req, res) {
    console.log(admin-get');
    res.send(200);
});

I was expecting I would need to handle a pre-flight request since the cors node module states: “An example of a ‘complex’ CORS request is one that uses an HTTP verb other than GET/HEAD/POST (such as DELETE) or that uses custom headers.” So I am not sure why this works?

I reconfigure the Ionic App and Node Express App to use a https address instead of a http:

Ionic App side:

RestangularProvider.setBaseUrl('https://11.22.33.44:3000');

// custom header
interceptors.serialNumber = function (element, operation, what, url, headers, query) {
  return {
    headers: angular.extend({
      'x-serialnumber': deviceStore.serialNumber
    }, headers)
  };
};

Restangular.one(‘Admin’).get()
 .then(function (data) {
    console.log(data);
   }, function (error) {
   console.log(error);
 });

Node Express App side:

var app = express();
app.use(cors());
app.get('/Admin, function(req, res) {
    console.log(admin-get');
    res.send(200);
});

when the Ionic App performs the GET request, I see in the Chrome debugger under “Network” an OPTIONS request that gets aborted/canceled (request’s status=-1). This tells me that I need to enable cors pre-flight on my Node Express App side (though why didn’t I see this error when the server was configured with http instead of https?).

So I tried the following on the Node Express App side per the express js cors module documentation:

app.options('Admin', cors()); // enable pre-flight request 
app.get('/Admin', cors(), function(req, res) {
    console.log('admin-get');
    res.send(200);
});

I see the same thing in the Chrome debugger under “Network” - an OPTIONS request that gets aborted/canceled (request’s status=-1). I also tried

app.options('*', cors());

with the same result.

I then removed the insertion of the custom header (x-serialnumber) on the Ionic App side. It now works.

So why would the Node Express Application work when configured with a http address with out handling a pre-flight request I would expect due to the insertion of a custom header on the Ionic App side?

When the Node Express App is configured with a https address (as well as Ionic App side with Restangular set base URL) why am I not handling the OPTIONS request?

I am not sure if the issue is on my Ionic App side or Node Express Server side?

Maybe I am configuring cors incorrect?

What am I missing?

I think it is a cors issue since I can eliminate the custom header on the Ionic App side when they are configured for a https address and it works (i.e. the addition of the custom header causes the aborted OPTIONS request status=-1).

Any insight would be greatly appreciated?


#2

UPDATE

I tried using Angular JS $http instead of Restangular. I got the following result which works:

$http({
  method: 'GET',
  url: theUrl
}).then(function successCallback(response) {
  $http({
    method: 'GET',
    url: theUrl,
    headers: {
      'x-serialnumber' : deviceStore.serialNumber
    }
  }).then(function successCallback(response) {
  }, function errorCallback(response) {
  });
}, function errorCallback(response) {
});

I see in Chrome Network Debugger the first GET (minus the custom header) goes out and I get a good response (200), followed by the OPTIONS request where I also get a good response (200), followed by a good GET with the custom header in it (get good response back).

If I do NOT do this first GET request minus the custom header, the OPTIONS request aborts on the Angular JS Ionic App side with a status of -1.

Why is this initial GET minus the custom header needed (i.e. GET (minus custom header) | OPTIONS | GET (with custom header))?

What do I not understand?