CORS works for access token but not for refresh token in Web Api 2

Question

I have a web api 2 app which I call to using an angularjs client. The web api app is capable of issuing access tokens and refresh tokens for authentication.

Having the following lines in the "GrantResourceOwnersCredentials" method, the CORS is working fine for allowing to issue access tokens:

var allowedOrigin = context.OwinContext.Get<string>("as:clientAllowedOrigin");
  if (allowedOrigin == null) allowedOrigin = "*";
  context.OwinContext.Response.Headers.Add("Access-Control-Allow-Origin", new[] { allowedOrigin });

However, when I try to issue refresh tokens through the angularjs app, I get this good old error in the console:

OPTIONS http://localhost:65141/token
(index):1 XMLHttpRequest cannot load http://localhost:65141/token. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:56815' is therefore not allowed access. The response had HTTP status code 400.

I was wondering as the access tokens are being issued fine, and the refresh tokens are also issued using the same endpoint, what should I do to overcome this issue?

By the way, the angular code is fine. I disabled google chrome web security and then everything worked! Any help is greatly appreciated!

Answer 1

After searching the whole freaking internet, here is what I found that resolves the problem. Adding this code to the AuthorizationProvider will resolve the problem:

public override Task MatchEndpoint(OAuthMatchEndpointContext context)
        {
            if (context.IsTokenEndpoint && context.Request.Method == "OPTIONS")
            {
                context.OwinContext.Response.Headers.Add("Access-Control-Allow-Origin", new[] { "*" });
                context.OwinContext.Response.Headers.Add("Access-Control-Allow-Headers", new[] { "authorization" });
                context.RequestCompleted();
                return Task.FromResult(0);
            }

            return base.MatchEndpoint(context);
        }