Der 'Access-Control-Allow-Origin'-Header enthält mehrere Werte' *, * ', aber nur einer ist erlaubt

Question

Ich benutze Angular und asp.net API. Das Problem, mit dem ich konfrontiert bin: Wenn ich CORS in den API-Code einfüge, funktioniert es in Internet Explorer, funktioniert aber nicht in Chrome und Firefox. Hier

ist der Fehler:

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.

Dies ist der Code, den ich in der web.config Datei hinzugefügt:

<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 der WebApiConfigFile.cs Datei, die ich hinzugefügt:

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

Ich bin mit CORS zum ersten Mal. Jede Hilfe wird geschätzt.

Answer 1

Chrome und Firefox verwenden eine so genannte Pre-Flight-Prüfung mit dem Verb "OPTIONS".

Also, Sie müssen "OPTIONS" zu den zulässigen Methoden in der web.config hinzufügen. Sie können auch einige Code der Application_Begin Anfrage hinzufügen müssen, wie diese Antwort schon sagt: Handling CORS Preflight requests to ASP.NET MVC actions

Hier sind einige Ressourcen für CORS:

IIS hijacks CORS Preflight OPTIONS request

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

Answer 2

Sie CORS setzen zweimal . Ich denke, das ist das Problem.

Bitte entfernen Sie alle CORS-Einstellungen. Sie können es entweder von web.config oder von WebApiConfigFile.cs entfernen.

Answer 3

Ich habe dieses Problem, weil ich die app.UseCors nach ConfigureOAuth setzen. Ändern Sie die Reihenfolge, um das Problem zu beheben.

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); 
    } 

Hier ist das Detail in meinem Fall:

• Am Anfang habe ich Origin bekam nicht in 'Access-Control-Allow-Origin' erlaubt, wenn \token aufrufen.
• LSo Ich füge den customHeader einschließlich 'Access-Control-Allow-Origin', 'Access-Control-Erlaube-Header', 'Access-Control-Allow-Methoden' hinzu. Es wurde die \token Anfrage behoben.
• Aber dann habe ich doppelte "Access-Control-Allow-Origin" beim Aufruf von Detail-API. Es gibt viele Vorschläge, wie this konnte einfach nicht beheben.