2016-07-12 5 views
0

Meine Server-Seite ist ein C# MVC-Projekt.Arbeiten mit reagieren im Dev-Modus

Wir versuchen zu implementieren reagieren auf die Client-Seite.

Ich verwende node-js mit npm, mit express Server und hot-reloading, also wenn ich meinen clientseitigen Code kompilieren läuft es auf http://localhost:3000.

Jetzt möchte ich einige Server-Seitenaufrufe hinzufügen. Um dies zu tun, ich meine c# Code mit Iis Express, die auch auf localhost in einem anderen Port öffnet. Nun ist das Problem, wenn der Client-Code auf Port: 3000 Ajax Aufrufe an die IIS Express, die auch auf localhost ist ich empfange die "Response for preflight is invalid (redirect)" Fehler, der wegen der gleichen Domain-Politik ist.

Also, was mache ich falsch, wie soll man im Dev-Modus arbeiten, wenn Server und Client getrennt sind?

Ich habe versucht, meine ASP.NET

<httpProtocol> 
    <customHeaders> 
    <add name="Access-Control-Allow-Origin" value="*" /> 
    <add name="Access-Control-Allow-Headers" value="Accept, Content-Type, Origin" /> 
    <add name="Access-Control-Allow-Methods" value="GET, POST, PUT, DELETE, OPTIONS" /> 
    </customHeaders> 
</httpProtocol> 

bearbeiten hinzufügen - Lösung

Wenn Sie einen Beitrag zu einer anderen Domäne senden, so zunächst der Client sendet eine OPTIONS Anfrage. So ist die Lösung tatsächlich ist diesen Code hinzuzufügen:

protected void Application_BeginRequest(object sender, EventArgs e) 
{ 
    EnableCrossOriginRequestsFromLocalhost(HttpContext.Current.Request); 
} 

private void EnableCrossOriginRequestsFromLocalhost(HttpRequest request) 
{ 
    if (!HttpContext.Current.Request.IsLocal) return; 
    if (request.UrlReferrer == null) return; //can't set Access-Control-Allow-Origin header reliably without a referrer so just return. Referrer should always be set when being called from an app under development because the app under development's URL will be sent as the referrer automatically. 
    var response = HttpContext.Current.Response; 
    response.AddHeader("Access-Control-Allow-Origin", request.UrlReferrer.GetLeftPart(UriPartial.Authority)); 
    response.AddHeader("Access-Control-Allow-Credentials", "true"); 
    if (request.HttpMethod == "OPTIONS") 
    { 
     response.AddHeader("Access-Control-Allow-Methods", "POST, PUT, DELETE"); 
     response.AddHeader("Access-Control-Allow-Headers", "Content-Type, Accept"); 
     response.AddHeader("Access-Control-Max-Age", "1728000"); 
     response.End(); 
    } 
} 
+0

Sie sollten CORS auf Ihrem IIS Express erlauben. 'Preflight' ist HTTP OPTIONS Anfrage, in der der Server mit' Allow-Control- * 'Headern antworten soll. Hier ist eine gute Einführung in CORS: http://www.html5rocks.com/en/tutorials/cors/ – zeronone

+0

@zeronone Ich habe versucht, schauen Sie auf meine Bearbeitung, es funktioniert nicht, es funktioniert auf Anfragen bekommen, aber nicht auf Post – omriman12

+0

Überprüfen Sie diesen Link: http://stackoverflow.com/questions/33645511/why-my-ajax-showing-preflight-is-invalid-redirect-error – zeronone

Antwort

0

In Ihrem Fall der „React“ Teil der App läuft alles auf statischen Ressourcen: die ursprüngliche HTML-Datei, die die App Schopf aus dem Sumpf, die Js Bündel mit Ihren React-Komponenten und deren Abhängigkeiten und anderen statischen Assets wie .css-Datei (en), Bilder, die aus der ursprünglichen html-Datei referenziert werden (über Script-Tags, Link-Tags usw.).

Der C# Teil Ihrer App ist dann nur mit dynamische Anfragen, die auf api/ajax Aufrufe zu Daten, die React wird verwendet, um die App im Browser rendern erhalten.

Ich gehe davon aus, dass Sie Webpack und den Webpack Dev Server verwenden. Der einfachste Ansatz bei der Entwicklung besteht darin, dass Ihr Webpack Dev Server nur alle API-/AJAX-Anforderungen an den Port weiterleitet, auf dem IISExpress ausgeführt wird. Dies ist eine einfache Einstellung in der Datei Webpack.config.js (siehe https://webpack.github.io/docs/webpack-dev-server.html#proxy). Sie verwenden Webpack, um die Bundles während der Build-Zeit zu erstellen, und dann dienen sie zur Laufzeit als statische Ressourcen vom Webserver.

In der Produktion bedient IIS alles (sowohl statische als auch dynamische Anfragen) und autorisiert wahrscheinlich den Zugriff auf die HTML-Ressource, die Ihre React-App vor dem Start bootet, sodass kein Express-Server beteiligt ist.

Verwandte Themen