Wie bekomme ich CORS mit ASP.Net Core Web API-Server Angular 2 Client

Question

Ich habe alles gelesen, was ich zum Thema ASP.NET Core und CORS finden kann und ich glaube, ich verstehe das meiste, aber ich werde Verdammt, wenn ich es zur Arbeit bringen kann. Ich bin mit dem Chrome-Browser, ist hier die Daten:

Prefilght:

General: 
Request URL:http://localhost:34376/api/login 
Request Method:OPTIONS 
Status Code:204 No Content 
Remote Address:[::1]:34376 

Response Headers: 
view source 
Access-Control-Allow-Credentials:true 
Access-Control-Allow-Headers:access-control-allow-origin,content-type 
Access-Control-Allow-Origin:http://localhost:3000 
Date:Wed, 23 Nov 2016 03:05:00 GMT 
Server:Kestrel 
Vary:Origin 
X-Powered-By:ASP.NET 
X-SourceFiles:=?UTF-8?B?QzpcUHJvamVjdHNcbXZjXFNob3BVc1NlcnZpY2Vcc3JjXFNob3BVc1NlcnZpY2VcYXBpXGxvZ2lu?= 

Request Headers: 
view source 
Accept:*/* 
Accept-Encoding:gzip, deflate, sdch, br 
Accept-Language:en-US,en;q=0.8 
Access-Control-Request-Headers:access-control-allow-origin, content-type 
Access-Control-Request-Method:POST 
Connection:keep-alive 
Host:localhost:34376 
Origin:http://localhost:3000 
Referer:http://localhost:3000/authentication 
User-Agent:Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/54.0.2840.71 Safari/537.36 

Beitrag:

Request URL:http://localhost:34376/api/login 
Request Method:POST 
Status Code:500 Internal Server Error 
Remote Address:[::1]:34376 

Response Headers: 
view source 
Content-Length:0 
Date:Tue, 22 Nov 2016 03:11:40 GMT 
Server:Kestrel 
X-Powered-By:ASP.NET 
X-SourceFiles:=?UTF-8?B?QzpcUHJvamVjdHNcbXZjXFNob3BVc1NlcnZpY2Vcc3JjXFNob3BVc1NlcnZpY2VcYXBpXGxvZ2lu?= 

Request Headers: 
view source 
Accept:*/* 
Accept-Encoding:gzip, deflate, br 
Accept-Language:en-US,en;q=0.8 
Access-Control-Allow-Origin:true 
Connection:keep-alive 
Content-Length:87 
Content-Type:application/json 
Host:localhost:34376 
Origin:http://localhost:3000 
Referer:http://localhost:3000/authentication 
User-Agent:Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/54.0.2840.71 Safari/537.36 

Request Payload: 
view source 
{userName: "", email: "irv@testing.com", password: "!P@ssw0rd", rememberMe: false} 
    email: "irv@testing.com" 
    password: "!P@ssw0rd" 
    rememberMe: false 
    userName:"" 

ASP.NET Core-Code:

public void ConfigureServices(IServiceCollection services) 
{ 
    services.AddCors(options => { 
     options.AddPolicy("CorsPolicy", 
      builder => builder.AllowAnyOrigin() 
      .AllowAnyMethod() 
      .AllowAnyHeader() 
      .AllowCredentials().Build()); 
    }); 
    // Add framework services. 
    services.AddApplicationInsightsTelemetry(Configuration); 

    services.AddMvc(); 
} 

public void Configure(IApplicationBuilder app, IHostingEnvironment env, ILoggerFactory loggerFactory) 
{ 
    loggerFactory.AddConsole(Configuration.GetSection("Logging")); 
    loggerFactory.AddDebug(); 

    app.UseCors("CorsPolicy"); 

    app.UseApplicationInsightsRequestTelemetry(); 

    app.UseApplicationInsightsExceptionTelemetry(); 

    app.UseMvc(); 
} 

ASP. NET Core Controller:

[EnableCors("CorsPolicy")] 
[Produces("application/json")] 
[Route("api/Authentication")] 
public class AuthenticationController : Controller 
{ 
    private IUnitOfWork _unitOfWork; 
    public AuthenticationController(IUnitOfWork unitOfWork) 
    { 
     _unitOfWork = unitOfWork; 
    } 

    [HttpPost] 
    [Route("/api/login")] 
    public JsonResult Login([FromBody]LoginInfo loginInfo) 
    { 
     return Json(new { id_token = _unitOfWork.Users.CreateJwt(loginInfo) }); 
    } 

Hier ist der Winkel Code:

@Injectable() 
export class AuthenticationService { 
private _currentAdminMode: boolean = false; 

constructor(private _http: Http, private _config: ConfigurationService) { 
} 

public login(logInfo: LoginInfo): Observable<TokenContainer> { 
    var headers = new Headers(); 
    headers.append('Content-Type', 'application/json'); 

    //return an observable 
    return this._http.post(this._config.hostPrefix + '/api/login', JSON.stringify(logInfo), { headers: headers }) 
     .map((response) => { 
      return <TokenContainer>(response.json()); 
     }); 
} 

Der genaue Fehler, die ich in der Konsole des Browsers bekommen ist:

XMLHttpRequest cannot load http://localhost:34376/api/login. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:3000' is therefore not allowed access. The response had HTTP status code 500. 

Beachten Sie, dass ich einen 500 Fehler bekommen von die POST-Anfrage. Das scheint nicht der Fehler zu sein, den der Server senden würde, wenn es ein CORS-Problem gäbe. Ich denke, es ist etwas anderes, aber all dieser Code arbeitete in einer einzigen Domäne, jetzt, da es CORS ist, geht etwas drunter und drüber. Ich habe sowieso alles gelesen, was ich finden kann und nichts funktioniert. Ich denke, dass es etwas mit der WebAPI-Route zu tun haben könnte.

Danke für jede Hilfe, die Sie geben können!

Answer 1

Nun, ich habe einen Tag damit verbracht, herauszufinden, wie man fast das gleiche Problem behandelt. Ich werde versuchen, weitere Informationen zu beschreiben:

Ich verwende netcoreapp1.0, RESTful Dienste über WebAPI gehostet auf IIS. Frontend: eckig2.

In meinem Startup.cs:

// this is not much important, you can organize builder in Configure method, calling app.UseCors() 
public void ConfigureServices(IServiceCollection services) 
{ 
    services.AddCors(options => 
      { 
       options.AddPolicy("AllowSpecificOrigin", 
        builder => builder.WithOrigins("http://localhost:37885") 
        .AllowAnyMethod() 
        .AllowAnyHeader() 
        .AllowCredentials()); 
      }); 
    services.AddMvc(); 
    services.Configure<MvcOptions>(options => 
    { 
     options.Filters.Add(new CorsAuthorizationFilterFactory("AllowSpecificOrigin")); 
    }); 
} 

public void Configure(IApplicationBuilder app, IHostingEnvironment env, ILoggerFactory loggerFactory) 
{ 
    app.UseCors("AllowSpecificOrigin"); 
    app.UseMvc();  
} 

Dieser Code perfekt funktioniert, wenn ich es in Visual Studio ausgeführt. Aber sobald ich mein WebAPI Projekt auf IIS veröffentlicht bekam ich Probleme: Preflight-Anfrage zurück Den Status "Code: 204 No Content", während POST und PUT-Anfragen zurück "405 Methode nicht erlaubt":

Es schien wie AllowAnyMethod() keine Wirkung haben, als App auf IIS gehostet wurde, sein Ursache nur GET, HEAD, OPTIONS, TRACE waren erlaubt, wie wir aus dem Bild oben sehen können.

dieses Ding zu testen und Verdächtigungen von Winkel- und Web-API zu entfernen, habe ich Testskript und lief es in Chrome-Entwickler-Konsole:

var xmlHttp = new XMLHttpRequest(); //returns a XMLHttpRequest object 
xmlHttp.open('PUT', "http://localhost:27895/api/usergroups/58c624eb54d98519e85c5771", true); 
xmlHttp.setRequestHeader('Content-Type', "application/json"); 
xmlHttp.send(JSON.stringify({"id":"58c624eb54d98519e85c5771","Name":"Группа первооткрывателей"})); 

ich das gleiche Problem habe dieses Skript aus meinem Winkel läuft Clientseite. Dann habe ich dieses Skript vom selben Ursprung ausgeführt, auf dem WebApi gehostet wurde (um WebAPI ohne COR zu überprüfen). Ich habe einen Fehler, der mir sagte, dass die PUT-Methode nicht vor Ort erlaubt ist!

Schließlich fand ich die Lösung: das Problem war im WebDAV-Modul auf IIS, im Konflikt mit meinen RESTful-Dienste. I WEBDAV Modul von meiner WebAPI Website auf IIS entfernt und jetzt funktioniert es perfekt:

dies zu tun:

1. wählen Sie WebAPI Website auf IIS
2. offen "Module"
3. WebDAV-Option finden und entfernen

Re Verschieben Sie auch die WebDAV-Option von Handler Mappings auf IIS für Ihre webApi-Site.

können diese Themen hilfreich sein, wenn Sie etwas mehr explaination über WebDAV und Web API Konflikte wollen:

forum iis.net, forum asp.net

---

Wie sich herausstellte, WebDav-Handler und Modul wieder in IIS erscheint nach die nächste Veröffentlichung. Also, um zu verhindern, dass Website von dies zu tun, ändern Sie Ihre web.config von WebAPI Anwendung, wie folgt aus:

<handlers> 
    <remove name="WebDAV" /> 
</handlers> 
<modules> 
    <remove name="WebDAVModule" /> 
</modules> 

this topic mir geholfen, es herauszufinden.