devモードでの反応

Question

私のサーバー側はC# mvcプロジェクトです。

私たちはクライアント側に反応を実装しようとします。

私はexpressサーバーとhot-reloadingを使用して、npmでnode-jsを使用していますので、私は私のクライアント側のコードをコンパイルするときには、http://localhost:3000上で実行されます。

ここで、サーバー側の呼び出しをいくつか追加します。 これを実行するには、別のポートのlocalhostでも開くiis expressを使用してc#コードを実行します。 問題は、ポート：3000上のクライアントコードがlocalhost上のiis expressにajax呼び出しを行っているときに、同じドメインポリシーのために"Response for preflight is invalid (redirect)"というエラーが発生することです。

私は間違っているのですが、サーバーとクライアントが分離しているときに、どのようにdevモードで作業するとしますか？

私は私の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> 

編集に追加しようとしました - ソリューション

あなたが別のドメインにポストを送信するので、最初のクライアントがOPTIONS要求を送信します。だから、解決策は、このコードを追加して、実際にある：あなたのケースでは

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

Answer 1

を、すべてのアプリの一部が静的リソースに沸く「リアクト」：アプリをブートストラップ初期のhtmlファイルを、.jsファイルを（スクリプトタグ、リンクタグなどを介して）最初のhtmlファイルから参照される.cssファイル、イメージなどのアセットのいずれかが含まれている可能性があります。

アプリのC＃部分は、動的リクエストにのみ関係し、Reactがブラウザでアプリをレンダリングするために使用するapi/ajax呼び出しになります。

WebpackとWebpack Dev Serverを使用していると仮定します。最も簡単な方法は、Webpack Dev Serverに、IISExpressが動作しているポートへのapi/ajax要求をプロキシすることです。これはWebpack.config.jsファイルの簡単な設定です（https://webpack.github.io/docs/webpack-dev-server.html#proxy参照）。ビルド時にWebpackを使用してバンドルを作成すると、実行時にWebサーバーから静的リソースとして提供されます。

Productionでは、IISはすべてのもの（静的要求と動的要求の両方）を提供しています。また、Reactアプリケーションを起動するhtmlリソースへのアクセスを許可している可能性があります。