The 'Access-Control-Allow-Origin' header contains multiple values '*, *', but only one is allowed

Question

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.

Here is the error:

XMLHttpRequest cannot load http://localhost:41028/api/values/abc. The 'Access-Control-Allow-Origin' header contains multiple values '*, *', but only one is allowed. Origin 'http://localhost:44796' is therefore not allowed access.

This is the code I added in the web.config file:

<system.webServer> ... <httpProtocol>   <customHeaders>       <!-- Adding the following custom HttpHeader will help prevent CORS errors -->       <add name="Access-Control-Allow-Origin" value="*" />       <add name="Access-Control-Allow-Headers" value="Content-Type" />   </customHeaders> </httpProtocol> ... </system.webServer> 

In the WebApiConfigFile.cs file I added:

var CorsAttribute = new EnableCorsAttribute("* ","* ", "* ");         config.EnableCors(CorsAttribute); 

I'm using CORS for the first time. Any help will be appreciated.

Answer 1

You are setting CORS twice. I think that is the issue.

Please remove any one CORS settings. You can either remove it from web.config or from WebApiConfigFile.cs.