Access-Control-Allow-Origin header has multiple values ​​OR Pre-flight jquery ajax for Web Api 2

Question

I have an asp.net web form running on localhost: 6414 then jquery ajax calls the web api service on localhost: 11974

I get an error

The 'Access-Control-Allow-Origin' header contains multiple values '*, *', but only one is allowed. Origin 'http://localhost:6414' is therefore not allowed access. 

So, I comb google and stackoverflow and find tons of conflicting information .

 1. Fix with web.config 2. Fix with jquery ajax call 3. Fix with CORS in web.api 

I tried Cors and web.config and all kinds of methods .

I'm currently wondering if the problem is actually the jquery code of the web forms as the sender, but in fact the response headers will mean that it is from a web api service ...

I look at my answer headers and I see 2 of them

 Access-Control-Allow-Origin:* ( repeated TWICE) 

I am trying to comment on this line in web.config in a web api project

 <add name="Access-Control-Allow-Origin" value="*" /> 

THEN I get this error 401:

 No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:6414' is therefore not allowed access. The response had HTTP status code 401. 

I have this code in web.config

 <authentication mode="Windows" /> <authorization> <allow verbs="OPTIONS" users="*" /> <deny users="?" /> </authorization> 

Now, if I uncommented Access-Control. ... in web.config and THEN comment from CORS code in WebApiConfig .cs

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

If this code is commented out, THEN I get an error before the flight

  XMLHttpRequest cannot load http://localhost:11974/PostCheckBox. Response for preflight has invalid HTTP status code 405 

It seems completely insane.

JQuery code

 function sendCheckboxes(id, out, yes, no) { //$(function () { //var storm = { id: 1902, StormOut: 1, StormYes: 1, StormNo: 1 }; var storm = { id: id, StormOut: out, StormYes: yes, StormNo: no }; //jQuery.support.cors = true; $.ajax({ type: "POST", data: JSON.stringify(storm), url: "http://localhost:11974/PostCheckBox", contentType: "application/json", //crossDomain: true, success: function (data) { console.log(data) }, error: function (x, y, z) { console.log(x + '\n' + y + '\n' + z); } }); //}); } 

Web api method

 [Route("PostCheckBox")] public HttpResponseMessage PostCheckBox([FromBody] StormData storm) {.... } 

If I call this method from the same domain (now the same port on localhost), it works fine

 http://localhost:11974/checkbox.html 

What gives...

Answer 1

You fight with your web.config

Comment on everything you added to web.config!

  <authentication mode="Windows" /> <authorization> <allow verbs="OPTIONS" users="*" /> <deny users="?" /> </authorization> 

I do not use this, and I am SURE that this is 1 problem In addition, you need to comment

 <add name="Access-Control-Allow-Origin" value="*" /> 

and then use these lines

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

You can always add security, authentication and authorization, and the Cors specification request is not global, but a class or method, but if you have a hard time just to get it working, then it really should work.

Answer 2

Include cors in startup.cs

  public void Configuration(IAppBuilder app) { HttpConfiguration config = new HttpConfiguration(); app.UseCors(Microsoft.Owin.Cors.CorsOptions.AllowAll); ConfigureOAuth(app); WebApiConfig.Register(config); // Make sure this line is called before ConfigureAuth(app), // app.UseCors(Microsoft.Owin.Cors.CorsOptions.AllowAll); app.UseWebApi(config); }