How to solve ASP.NET Web API CORS Preflight issue when using PUT and DELETE requests with multiple origins?
<p>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:</p>

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

<p>This caused this preflight issue:</p>

<pre><code>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.
</code></pre>

<p>that I solved by adding the following method in Global.asax.cs:</p>

<pre><code>protected void Application_BeginRequest()
{
    if (Request.Headers.AllKeys.Contains("Origin") &amp;&amp; Request.HttpMethod == "OPTIONS")
    {
        Response.Flush();
    }
}
</code></pre>

<p>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:</p>

<pre><code>&lt;add name="Access-Control-Allow-Origin" value="http://localhost:63342,http://localhost:63347,http://localhost:63345/&gt;
</code></pre>

<p>but apparently that is not allowed. This produced the following error:</p>

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

<p>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:</p>

<pre><code>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);
</code></pre>

<p>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?</p>

<p>EDIT:</p>

<p>The print of the preflight error:</p>

<p><a href="https://i.stack.imgur.com/eavov.png" rel="noreferrer"><img src="https://i.stack.imgur.com/eavov.png" alt="enter image description here"></a></p>