How to solve ASP.NET Web API CORS Preflight issue when using PUT and DELETE requests with multiple origins?

Question

I have an ASP.NET web API that is being called by three different SPA. I am using windows authentication for the web API. I initially tried to configure CORS in the Web.config like this:

<httpProtocol>
    <customHeaders>
        <add name="Access-Control-Allow-Origin" value="http://localhost:63342" />
        <add name="Access-Control-Allow-Methods" value="GET, POST, PUT, DELETE" />
        <add name="Access-Control-Allow-Headers" value="Origin, X-Requested-With, Content-Type, Accept" />
        <add name="Access-Control-Allow-Credentials" value="true" />
    </customHeaders>
</httpProtocol>

This caused this preflight issue:

Response to preflight request doesn’t pass access control check: No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Origin (...) is therefore not allowed access.

that I solved by adding the following method in Global.asax.cs:

protected void Application_BeginRequest()
{
    if (Request.Headers.AllKeys.Contains("Origin") && Request.HttpMethod == "OPTIONS")
    {
        Response.Flush();
    }
}

This approach worked perfectly for a single SPA. I thought that I could go to the Web.config and add the other origins like this:

<add name="Access-Control-Allow-Origin" value="http://localhost:63342,http://localhost:63347,http://localhost:63345/>

but apparently that is not allowed. This produced the following error:

The 'Access-Control-Allow-Origin' header contains multiple values (...), but only one is allowed. Origin (...) is therefore not allowed access.

So in order to try and fix this, I changed my approach and instead decided to try to configure CORS on the WebAPIConfig.cs, in the Register method like this:

var cors = new EnableCorsAttribute("http://localhost:63342,http://localhost:63347,http://localhost:63345", "Origin, X-Requested-With, Content-Type, Accept", "GET, POST, PUT, DELETE");
cors.SupportsCredentials = true;
config.EnableCors(cors);

I thought this would work but now I have the preflight error again when using PUT and DELETE requests and I don't know how to fix this. I debugged the Application_BeginRequest method and it is still flushing the OPTIONS request so I have no idea of what is causing this error. Does anyone know how I can solve this issue?

EDIT:

The print of the preflight error:

Answer 1

I was able to solve my problem by further customizing the Application_BeginRequest method in Global.asax.cs, like this:

protected void Application_BeginRequest()
{
    if (Request.HttpMethod == "OPTIONS")
    {
        Response.StatusCode = (int)HttpStatusCode.OK;
        Response.AppendHeader("Access-Control-Allow-Origin", Request.Headers.GetValues("Origin")[0]);
        Response.AddHeader("Access-Control-Allow-Headers", "Content-Type, Accept");
        Response.AddHeader("Access-Control-Allow-Methods", "GET, POST, PUT, DELETE");
        Response.AppendHeader("Access-Control-Allow-Credentials", "true");
        Response.End();
    }
}

What this code does is add the missing headers to the OPTIONS response (preflight request) that were causing the preflight error. Since I have different origins calling my web API, I'm using Request.Headers.GetValues("Origin")[0]) to set the origin in the response dinamically.

In the WebApiConfig.cs I still specified the different origins but used wildcards on the headers and methods, as well as setting the SupportsCredentials to true, like this:

var cors = new EnableCorsAttribute("http://localhost:63342,http://localhost:63347,http://localhost:63345", "*", "*");
cors.SupportsCredentials = true;
config.EnableCors(cors);

Also, if you're using AngularJS like I am, you must configure $http to use credentials. This can be configured globally like this:

angular
.module('Application')
.config(['$httpProvider',
    function config($httpProvider) {
        $httpProvider.defaults.withCredentials = true;
    }
]);

And that's it. This solved my problem. If someone else is still having problems, I recommend reading the following publications, which helped me reach my answer:

• http://www.asp.net/web-api/overview/security/enabling-cross-origin-requests-in-web-api
• https://evolpin.wordpress.com/2012/10/12/the-cors/
• AngularJS $http, CORS and http authentication
• AngularJS performs an OPTIONS HTTP request for a cross-origin resource
• AngularJS POST Fails: Response for preflight has invalid HTTP status code 404