Aug
26

In a development environment it may be handy to enable CORS for testing. Sometimes you need to expose custom headers as well. So let’s get our Access-Control-Expose-Headers’ing on.

With the out of the box WebAPI 2 setting up CORS with a custom header is easy. After we have added Microsoft.AspNet.WebApi.Cors to our project we just have to add the following to our WebApiConfig:

config.EnableCors(new EnableCorsAttribute("*", "*", "*", "X-Custom-Header"));

However, if you are using the Owin middleware version (Microsoft.Owin.Cors) you will have to setup a custom CorsOptions object. Currently your Cors middleware config may look like this:

app.UseCors(CorsOptions.AllowAll); // Note: Make sure to call app.UseCors() before you load in any additional middleware that will use requests. (Like app.UseWebApi(config);)

Lets take a look at what CorOptions.AllowAll does:
Microsoft.Owin.Cors CorsOptions.AllowAll Option
We can see that all it is doing is creating a custom CorsOption object for us with some default settings. The meat of the configuration is located in the CorsPolicy object. You’ll notice one particular property of CorsPolicy that is of particular interest of us: CorsPolicy.ExposedHeaders This read-only list contains a collection of headers to expose via Cors.

To bring it all together, we will need to recreate the object CorsOptions.AllowAll made for us, as well as appending some custom headers to our new CorsPolicy:
Cors Setup with custom CorsOptions and CorsPolicy options.

About Jim Walker:

Jim Walker is a software engineer and entrepreneur in Northeastern Pennsylvania.

Find all posts by Jim | Visit Website

You can leave a response, or trackback from your own site.

  • Christian Johansen

    Thx. Easy and clear help for me

  • Bob

    It’s very easy to set up and the topic is covered well.

    What I
    can’t seem to get working is POST to a CORS Enabled WebApi with Chrome.
    Actually, I can POST but I can POST with any data in the body of the
    post and without that I might as well only ever use the GET verb.

    Any
    thoughts on this. I don’t want to pollute the comments areas so I’ll
    past a link to a broader description. if anyone has any ideas I would
    appreciate it.

    http://forums.asp.net/p/2014467/5798423.aspx?Re+WebApi+w+POST+w+body+data+w+origin+w+attribute+routing+w+Chrome+FF+IE

  • http://wisentechnologies.com/it-courses/.net-training.aspx .Net Training in Chennai
  • S. Wright

    Thanks for this. The ‘Note’ “Make sure to call app.UseCors() before you load in any additional middleware that will use requests. (Like app.UseWebApi(config);)” was the key point for me. I was calling UseCors() at the end of the ConfigureAuth call, after I had called UseWebApi().

  • Richard Baldwin

    Worked a treat, thank you

  • Jerry Jeremy

    Thanks for this! I have one question, how do you set it up as attribute? So that I can choose which API to enable CORS. Please answer. Thanks.

  • Harini R

    thanks for sharing wonderful blog with us. its really more helpful to our institute candidates to get aware some useful knowledge keep sharing more information.

  • Rohan

    Hi Jim,

    How to add certain method(get,post) for certain origins I tried adding below but got no success:

    var origins = “http://localhost:53200″;//Need to add in config or static files
    if (origins != null)
    {
    foreach (var origin in origins.Split(‘;’))
    {
    corsPolicy.Origins.Add(origin);
    corsPolicy.Methods.Add(“Get”)
    }
    }

    Thanks,
    Rohan

  • saisrikanthreddy gali

    Thank you very much Jim. Your solution saved me a lot of time

  • Dmitry Shevchuk

    Thank you! Your guide helped me