title: The 'Access-Control-Allow-Origin' header contains multiple values '*, *', but only one is allowed
body: <p>I'm using Angular and ASP.NET API. The issue I'm facing: when I add CORS in the API code, it works on Internet Explorer but does not work on Chrome and Firefox.</p>
  
  <p>Here is the error:</p>
  
  <blockquote>
    <p>XMLHttpRequest cannot load <a href="http://localhost:41028/api/values/abc" rel="noreferrer">http://localhost:41028/api/values/abc</a>. The
    'Access-Control-Allow-Origin' header contains multiple values '*, *',
    but only one is allowed. Origin '<a href="http://localhost:44796" rel="noreferrer">http://localhost:44796</a>' is therefore
    not allowed access.</p>
  </blockquote>
  
  <p>This is the code I added in the <code>web.config</code> file:</p>
  
  <pre><code>&lt;system.webServer&gt;
  ...
  &lt;httpProtocol&gt;
    &lt;customHeaders&gt;
        &lt;!-- Adding the following custom HttpHeader will help prevent CORS errors --&gt;
        &lt;add name="Access-Control-Allow-Origin" value="*" /&gt;
        &lt;add name="Access-Control-Allow-Headers" value="Content-Type" /&gt;
    &lt;/customHeaders&gt;
  &lt;/httpProtocol&gt;
  ...
  &lt;/system.webServer&gt;
  </code></pre>
  
  <p>In the <code>WebApiConfigFile.cs</code> file I added:</p>
  
  <pre><code>var CorsAttribute = new EnableCorsAttribute("* ","* ", "* ");
          config.EnableCors(CorsAttribute);
  </code></pre>
  
  <p>I'm using CORS for the first time. Any help will be appreciated.</p>