title: Error sending proper header values to a Preflight request from angular $http to asp.net webapi
body: <p>I am trying to send authentication data to a backend web api using angular's $http. When I add the line below, the browser starts sending preflight requests</p>
  
  <pre><code>$http.defaults.headers.common.Authorization = 'Basic xxxxyyyyyy' ;
  </code></pre>
  
  <p>From the web api side, When I get a request with OPTIONS method, I process it as follows.</p>
  
  <pre><code>if (request.Method == HttpMethod.Options &amp;&amp; request.Headers.Any(k =&gt; k.Key.Contains("Origin")))
              {
                  var response = new HttpResponseMessage(HttpStatusCode.OK);
                  response.Headers.Add("Access-Control-Allow-Headers", "Content-Type,X-CSRF-Token, X-Requested-With, Accept, Accept-Version, Content-Length, Content-MD5,  Date, X-Api-Version, X-File-Name");
                  response.Headers.Add("Access-Control-Allow-Origin", request.Headers.GetValues("Origin"));
                  response.Headers.Add("Access-Control-Allow-Credentials", "true");
                  response.Headers.Add("Access-Control-Allow-Methods", "POST, GET, PUT, DELETE, OPTIONS");
                  var tsc = new TaskCompletionSource&lt;HttpResponseMessage&gt;();
                  tsc.SetResult(response);
                  return tsc.Task;  
              }
  </code></pre>
  
  <p>But the preflight request fails access control check.</p>
  
  <blockquote>
    <p>XMLHttpRequest cannot load <a href="http://localhost:53024/api" rel="nofollow">http://localhost:53024/api</a>.............
    Response to preflight request doesn't pass access control check: The
    'Access-Control-Allow-Origin' header contains multiple values
    '<a href="http://localhost:9000" rel="nofollow">http://localhost:9000</a>, *', but only one is allowed. Origin
    '<a href="http://localhost:9000" rel="nofollow">http://localhost:9000</a>' is therefore not allowed access.</p>
  </blockquote>
  
  <p>What am I doing wrong?</p>