Issue with CORS after adding Stormpath Angular SDK

Question

I am working on SPA MEAN app, I was developing it against Apiary mock APIs, which has the following CORS headers set:

Access-Control-Allow-Methods → OPTIONS,GET,HEAD,POST,PUT,DELETE,TRACE,CONNECT
Access-Control-Allow-Origin → *
Access-Control-Max-Age → 10

It all works fine and angular can access it using $http angular service just fine. However after adding Stormpath Angular SDK all these requests fail with following error:

XMLHttpRequest cannot load https://xxx.apiary-mock.com/workshops?type=favourite. Credentials flag is 'true', but the 'Access-Control-Allow-Credentials' header is ''. It must be 'true' to allow credentials. Origin 'http://localhost:8000' is therefore not allowed access.

I am trying to get to figure out why these requests are rejected and at what point these headers are added?

Answer 1

Thank you for finding this issue. The Stormpath Angular SDK does have an interceptor which sets the withCredentials: true flag for all requests. Please see the code here.

The intention is to ensure that our authentication cookies are always sent, even in a cross-domain situation. But I can see how this will be problematic if your Angular application is talking to other APIs that don't require cookies to be sent.

As a workaround, you can override our interceptor by simply adding another one:

angular.module('myapp', [
  'stormpath',
  'stormpath.templates'
]).config(function ($httpProvider) {
  $httpProvider.interceptors.push(function() {
    return {
      request: function(config) {
        config.withCredentials=false;
        return config;
      }
    };
  });
});

I've created an issue to discuss a better solution: https://github.com/stormpath/stormpath-sdk-angularjs/issues/72