Web Api 2 Preflight CORS request for Bearer Token

Question

I have a web-app with an AngularJS front-end and a Web Api 2 back-end, and it uses bearer-tokens for authentication.

All is well in FireFox & IE, but with Chrome

Answer 1

By default - Access-Control-Max-Age: seconds is 0 and your requests not caching.

Try set it to max value: (Owin selfhost). It solve problem with extra OPTIONS requests

            app.UseCors(new CorsOptions
            {
                PolicyProvider = new CorsPolicyProvider
                {
                    PolicyResolver = context => Task.FromResult(new CorsPolicy
                    {
                        AllowAnyHeader = true,
                        AllowAnyMethod = true,
                        AllowAnyOrigin = true,
                        SupportsCredentials = false,
                        PreflightMaxAge = Int32.MaxValue // << ---- THIS
                    })
                }
            });

Answer 2

Let me add one thing I have learned today. This sample:

app.UseCors(CorsOptions.AllowAll);

worked for me since the beginning. I just wasn't aware, becuase the requests I have been doing to verify, did not have following headers:

Origin: http://hostname
Access-Control-Request-Method: GET

Only after I added those, the correct headers started to appear in responses.

Answer 3

The below is Fancy comment:

Figured this out with help from post by LeftyX on Jun 29:
- Move this LOC app.UseCors(Microsoft.Owin.Cors.CorsOptions.AllowAll); to the FIRST LINE in the ConfigureAuth method of Startup.Auth.cs.
- Then, REMOVE this LOC context.OwinContext.Response.Headers.Add("Access-Control-Allow-Origin", new[] { "*" }); from the GrantResourceOwnerCredentials() method of ApplicationOAuthProvide.cs.

Preflight CORS-request them gets handled properly, and then the actual requet goes through

Thank man, you save my whole day.
Cause it happens for many guys, I bring your comment to answer box for other guys can see it.

I don't want to get vote up for this. Please comment on my answer instead

Thank you

Answer 4

I hope this is able to help somebody out there. For me:

• adding the app.useCors(); LOC did not work.
• Adding the app.useCors(); LOC worked for other people on my team.

So I needed a solution that would work across everyone's environments.

Ultimately what I ended up doing was adding the header and value right into the Web.config with the following (where localhost:9000 is my node application that is serving up angular):

<system.webServer>
    <httpProtocol>
      <customHeaders>
        <add name="Access-Control-Allow-Origin" value="http://localhost:9000" />
        <add name="Access-Control-Allow-Headers" value="Content-Type"/>
      </customHeaders>
    </httpProtocol>
  </system.webServer>

Then in production you can just change the origin value to the production front-end url.

If you want CORS enabled for all origins, change the value to "*".