How to Fix “No ‘Access-Control-Allow-Origin’ header” in ASP.NET WebAPI

I am not 100% sure what Google did to Chromium in Update 42.  However after that update landed I started to get reports of our Angularjs application started to have problems communicating with our ASP.NET WebAPI.  We started getting errors similar to this:

No ‘Access-Control-Allow-Origin’ header is present on the requested resource

I tested the API and CORs with Fiddler and POSTMAN and everything worked great.  So the confusion started.  The web team created a simple test UI so I could debug the HTTP stack.  After looking deeper and some searches online we found that the cause was being done by Chromes preflight call for OPTIONS.

Out of the box WebAPI does not support the OPTIONS Verb and before update 42 Chrome would ignore if the API did not have this ability and continue on; however this does not appear to be an option now.  With this issue using EnableCors[“*”,”*”,”*”] does not appear to work anymore.

There are few different ways to add the OPTIONS verb to WebAPI and it appears to very depending on your usage.

Option 1 – add it to the ConfigureAuth

app.Use(async (context, next) =>{

IOwinRequest req = context.Request;

IOwinResponse res = context.Response;

if (req.Path.StartsWithSegments(new PathString(“/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”);

return;

}

}

await next();

});

Add the headers to the request headers.  Adjust the Methods and headers to what would want to support or use the wild cards.

Options 2 – Add headers in OWIN

If you are using OWIN for authentication, update the method GrantResourceOwnerCredentials and add the following to the first line.

context.OwinContext.Response.Headers.Add("Access-Control-Allow-Origin", new[] { "*" });

Option 3 – add Owin Cors to the startup.cs

To start with add NuGet package

Microsoft.Owin.Cors

Update Startup.cs and add the following to the Configuration method

app.UseCors(Microsoft.Owin.Cors.CorsOptions.AllowAll);

After this remove EnableCors[“*”,”*”,”*”] from your controllers or you will get an error for duplicate headers.

Advertisements
This entry was posted in ASP.NET, C#, Web and tagged . Bookmark the permalink.

One Response to How to Fix “No ‘Access-Control-Allow-Origin’ header” in ASP.NET WebAPI

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s