angular $http.get / restangular call fails

Question

I have an ionic app (uses angular js). I am trying to make a call to my localserver (node express) using the restangular api (have also tried using $http.get).

I set the base url as

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

I have an interceptor defined to add a custom header:

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

I have tried the following restangular call:

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

and the following using a $http call:

$http({
        method: 'GET',
        url: 'https://localhost:3000/Admin',
        headers: {
          'Content-Type': 'application/json',
          'x-serialnumber': '000000000'   
        }
      }).then(function (data) {
        console.log(data);
      }, function (error) {
        console.log(error);
      });

I always get the error condition where data=null | status=-1 | statusText=""

I do not see ANY request on the server side. It goes to the fail case immediately.

If I remove the custom header, I see the requests on the server side and get a good response (i.e. 200).

On the server side I am using the cors module: var app = express(); app.use(cors());

All evidence point to deviceStore.serialNumber throwing a null pointer exception (deviceStore is undefined) — Andonaeus
– Andonaeus, Commented Nov 23, 2016 at 16:01
Thank you for the response Andonaeus. I verified it is not null. Also the $http case I hard code the header value (x-serialnumber) and get the same error as the rectangular case — brent
– brent, Commented Nov 23, 2016 at 16:16
If you're using CORS, have you added the custom header to the list of allowed headers? — user47589
– user47589, Commented Nov 23, 2016 at 16:19
@Amy is right, you need to add an exception (don't know why I thought we were talking about CSRF, not enough coffee) — Andonaeus
– Andonaeus, Commented Nov 23, 2016 at 16:20
Thank you for the responses. I tried the following on my node express server (using expressjs\cors module): var corsOptions = { allowedHeaders: 'x-serialnumber' }; app.use(cors(corsOptions)); — brent
– brent, Commented Nov 23, 2016 at 16:32

brent · Accepted Answer · 2016-12-21 16:02:32Z

Well what I needed to do was the following:

$http({
  method: 'GET',
  url: 'https://example.com/DUMMY'
}).then(function successCallback(response) {
  $http({
    method: 'GET',
    url: 'https://example.com',
    headers: {
      'x-serialnumber': deviceStore.serialNumber
    }
  }).then(function successCallback(response) {
    console.log('SUCCESS');
  }, function errorCallback(response) {
    console.log('FAILURE');
  });
}, function errorCallback(response) {
  console.log('FAILURE');
});

In essence, I needed to send a "preliminary" GET request with NO custom header. The GET request could be to anything on my node express server. After this "preliminary" GET request, I could perform the GET request with the custom header in it.

Specifically on the server side I see the following:

GET /DUMMY 200 10ms - 2b
OPTIONS / 204 1ms
GET / 200 13ms - 1.03kb

Without performing this "preliminary" get request, the OPTIONS request in my Ionic App would abort - status code = -1 - usually means the request was aborted and would never leave Ionic App side.

I still do not understand why I need this "preliminary" GET request, but this works for me.

Collectives™ on Stack Overflow

angular $http.get / restangular call fails

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related