Request header was not present in the Access-Control-Allow-Headers list

Question

In my API, I have the following code:

public class CustomOAuthProvider : OAuthAuthorizationServerProvider
{

    public override Task MatchEndpoint(OAuthMatc         


        

Answer 1

I've found a piece of code here which fixed it for me.

//Startup.cs
public void ConfigureOAuth(IAppBuilder app)
{
    app.Use(async (context, next) =>
    {
        IOwinRequest req = context.Request;
        IOwinResponse res = context.Response;
        if (req.Path.StartsWithSegments(new PathString("/oauth2/token")))
        {
            var origin = req.Headers.Get("Origin");
            if (!string.IsNullOrEmpty(origin))
            {
                res.Headers.Set("Access-Control-Allow-Origin", origin);
            }
            if (req.Method == "OPTIONS")
            {
                res.StatusCode = 200;
                res.Headers.AppendCommaSeparatedValues("Access-Control-Allow-Methods", "GET", "POST");
                res.Headers.AppendCommaSeparatedValues("Access-Control-Allow-Headers", "authorization", "content-type", "x-api-applicationid", "access-control-allow-origin");
                return;
            }
        }
        await next();
    });

    // rest of owin Oauth config
}

I removed the MatchEndpoint method from my CustomOAuthProvider.cs

Answer 2

Make sure it's not as simple as a misspelling of the content-type header in your AJAX. I was getting this with an OPTIONS preflight with an application/x-www-form-urlencoded content-type, which doesn't necessitate a preflight, but I had

content-type: application/x-www-form-urlencoded

instead of

application/x-www-form-urlencoded

as my contentType option.

WRONG:

$.ajax({
    url: 'http://www.example.com/api/Account/Token',
    contentType: 'content-type: application/x-www-form-urlencoded',
    method: 'POST',
    data: {
        grant_type: "password",
        username: $('#username').val(),
        password: $('#password').val()
    },
});

RIGHT:

$.ajax({
    url: 'http://www.example.com/api/Account/Token',
    contentType: 'application/x-www-form-urlencoded',
    method: 'POST',
    data: {
        grant_type: "password",
        username: $('#username').val(),
        password: $('#password').val()
    },
});

Answer 3

No need to remove MatchEndPoint

Instead of adding array element just add Comma-Separated value as first array element in Access-Control-Allow-Headers

Instead of

 context.OwinContext.Response.Headers.Add("Access-Control-Allow-Headers", 
                new[] { 
                    "access-control-allow-origin", 
                    "accept", 
                    "x-api-applicationid", 
                    "content-type", 
                    "authorization" 
                });

use

context.OwinContext.Response.Headers.Add("Access-Control-Allow-Headers", 
    new[] { 
        "access-control-allow-origin,accept,x-api-applicationid,content-type,authorization" 
    });