.NET Core allow CORS in authentication middleware

Question

I currently have an angular app web client that is separate from my .net core 2 web api. The angular app is hosted at localhost:35000 while the web api is hosted at localhost:36000. Due to this, there are various places where I need to allow CORS for requests to be successful. In Startup.cs, I have configured my authentication middleware as follows:

services.AddOpenIddict(options =>
            {
                // Integrate with EFCore
                options.AddEntityFrameworkCoreStores<MylestoneIdentityContext>();
                // Use Json Web Tokens (JWT)
                options.UseJsonWebTokens();
                // Set a custom token endpoint (default is /connect/token)
                options.EnableTokenEndpoint(Configuration["Authentication:OpenIddict:TokenEndPoint"]);
                // Set a custom auth endpoint (default is /connect/authorize)
                options.EnableAuthorizationEndpoint(Configuration["Authentication:OpenIddict:AuthorizationEndPoint"]);
                // Allow client applications to use the grant_type=password flow.
                options.AllowPasswordFlow();
                // Enable support for both authorization & implicit flows
                options.AllowAuthorizationCodeFlow();
                options.AllowImplicitFlow();
                // Allow the client to refresh tokens.
                options.AllowRefreshTokenFlow();
                // Disable the HTTPS requirement (not recommended in production)
                options.DisableHttpsRequirement();
                // Register a new ephemeral key for development.
                // We will register a X.509 certificate in production.
                options.AddEphemeralSigningKey();
            });
...
app.UseAuthentication();

and I have allowed CORS requests to my application as follows:

services.AddCors(options =>
            {
                options.AddPolicy("AllowCors",
                    builder => builder.AllowAnyOrigin().AllowAnyHeader().AllowAnyMethod());
            });
...
app.UseCors("AllowCors");
...
//also put [EnableCors("AllowCors")] on each controller class declaration

I am able to hit the server and successfully register a user account, however when attempting to log in, I still receive the error in browser:

Failed to load http://localhost:36000/api/connect/token: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:35000' is therefore not allowed access. The response had HTTP status code 500.

I think this may be due to /api/connect/token not having an actual controller class that I can put the annotation [EnableCors("AllowCors")] on. I've tried multiple ways to overcome this including adding the specified header to my requests like the following in my web client:

return this.http.post(
            url,
            this.toUrlEncodedString(data),
            new RequestOptions({
                headers: new Headers({
                    "Content-Type": "application/x-www-form-urlencoded",
                    "Access-Control-Allow-Origin": "*"
                })
            }))

which hits the following angular http service wrapper:

post(url, data, opts = {}) {
        this.configureAuth(opts);
        return this.http.post(url, data, opts);
}

configureAuth(opts: any) {
    var i = localStorage.getItem(this.authKey);
    if (i != null) {
        var auth = JSON.parse(i);
        console.log(auth);
        if (auth.access_token != null) {
            if (opts.headers == null) {
                opts.headers = new Headers();
            }
            opts.headers.set("Authorization", `Bearer ${auth.access_token}`);
            opts.headers.set("Access-Control-Allow-Origin", `*`);
        }
    }
}

I'm running out of ideas on how to allow this authorization request to go through to my middleware. All help is appreciated.

Might not be the only issue but I think you also need to add .AllowCredentials() to your CORS policy otherwise it will not accept the authorization header your setting on the client side. Oh and double check that your setting the cors policy BEFORE you call app.UseMvc() . — DerrickF
– DerrickF, Commented Jan 3, 2018 at 23:19

user1859022 · Accepted Answer · 2018-01-09 12:50:35Z

2

I am afraid you cannot use the "*" wildcard in the Access-Control-Allow-Origin header.
see MDN: Credentialed requests and wildcards:

When responding to a credentialed request, the server must specify an origin in the value of the Access-Control-Allow-Origin header, instead of specifying the "*" wildcard.

answered Jan 9, 2018 at 12:50

user1859022

2,7651 gold badge27 silver badges37 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

.NET Core allow CORS in authentication middleware

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