34

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.

RBT
  • 24,161
  • 21
  • 159
  • 240
trigri
  • 525
  • 1
  • 6
  • 16

6 Answers6

49

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.

Abhilash Augustine
  • 4,128
  • 1
  • 24
  • 24
4

Chrome and Firefox use what is called a pre-flight check using the "OPTIONS" verb.

So, you have to add "OPTIONS" to the allowed methods in the web.config. You also may have to add some code to the Application_Begin request, like this answer suggests: Handling CORS Preflight requests to ASP.NET MVC actions

Here are some resources for CORS:

IIS hijacks CORS Preflight OPTIONS request

http://www.asp.net/web-api/overview/security/enabling-cross-origin-requests-in-web-api

Community
  • 1
  • 1
Karen B
  • 331
  • 2
  • 9
2

All other solutions provided for webAPI. This solution is for when you using webservice(.asmx) as API

Remove 'Access-Control-Allow-Origin' details from either in Global.asax.cs file's begin_request function or in web.config. Because this setting must be in one place only

RBT
  • 24,161
  • 21
  • 159
  • 240
Sivashankar
  • 493
  • 1
  • 8
  • 17
0

I got this issue because I put the app.UseCors after ConfigureOAuth. Change the order fix the problem.

    public void Configuration(IAppBuilder app)
    {
        HttpConfiguration config = new HttpConfiguration();

        app.UseCors(Microsoft.Owin.Cors.CorsOptions.AllowAll);
        ConfigureOAuth(app);

        WebApiConfig.Register(config);

        // Used to put this line after ConfigureAuth(app), 
        // app.UseCors(Microsoft.Owin.Cors.CorsOptions.AllowAll);

        app.UseWebApi(config);
    }

Here is the detail in my case:

  • At the beginning I got Origin is not allowed in 'Access-Control-Allow-Origin', when calling \token.
  • LSo I add the customHeader including 'Access-Control-Allow-Origin', 'Access-Control-Allow-headers', 'Access-Control-Allow-methods'. It fixed the \token request.
  • But then I got duplicate 'Access-Control-Allow-Origin' when calling detail api. There are a lot suggestions, such as this just couldn't fix.
Community
  • 1
  • 1
dichen
  • 1,643
  • 14
  • 19
0

I had the same issue. After I put the exact domain instead of * (see below), it worked for me.

var CorsAttribute = new EnableCorsAttribute("https://www.mywebsite.com","", ""); config.EnableCors(CorsAttribute);

Alex W.
  • 546
  • 1
  • 7
  • 22
0

I had the exact same error and the reason was that

"Access-Control-Allow-Origin: *"

header was already present in the IIS HTTP Response Headers list. Example

Removing it from the list worked for me.

cute-marshmallow
  • 41
  • 1
  • 5