Angular 2を使用してPOSTでASP.NET MVC 4でクロスオリジンリクエストを有効にする方法

Question

私は実際CORSでPOSTリクエストを行うことについて苦労しています。

私は実際に私のコントローラ内の私の方法で正しいレスポンスヘッダを追加し、クラス

using System; 
using System.Web.Mvc; 

public class AllowCrossSiteAttribute : ActionFilterAttribute 
{ 
    public override void OnActionExecuting(ActionExecutingContext filterContext) 
    { 
     filterContext.RequestContext.HttpContext.Response.AddHeader("Access-Control-Allow-Origin", "http://localhost:4200"); 
     filterContext.RequestContext.HttpContext.Response.AddHeader("Access-Control-Allow-Headers", "*"); 
     filterContext.RequestContext.HttpContext.Response.AddHeader("Access-Control-Allow-Credentials", "true"); 

     base.OnActionExecuting(filterContext); 
    } 
} 

をしたと私はこの

[AllowCrossSite] 
public ActionResult GetReportParameters(string IdRapport) 

ようにそれを使用して、私が期待した結果

を取得

しかし、問題は、この特定のコンテンツタイプを渡すカスタムヘッダーでPOSTリクエストを作成しようとしているときです

'Content-Type': 'application/json; charset=utf-8' 

私は実際には何も私が正しく私の属性クラスに行くよ場合でも、ヘッダについては行われませんようなので、それはだ、このレスポンスヘッダに

を取得しています。ここで

は角2サービス宣言する問題がない郵便配達を使用することにより

const headers = new Headers({ 'Content-Type': 'application/json; charset=utf-8' }); 
const options = new RequestOptions({ headers: headers , withCredentials: true }); 

const mock = { 
    name: 'TitreRegroupement1', 
    visible: false, 
    type: 'System.String', 
    value: 'Test' 
}; 

// tslint:disable-next-line:max-line-length 
const body = JSON.stringify({ idRapport: '00392024-d171-4f39-9c5c-97a51f53fd54', filtre: '', exportFormat: '', parameters: data }); 

return this.http.post('http://localhost:8080/ReportingViewer/ExportReport', body, options) 
    .map((response: Response) => { 
     return this.extractSingleData(response, Parameters); 
    }) 
    .catch(this.handleError); 
} 

で私の正面側で、全部の旅行は正しく私はノーとコントローラ内のメソッドから、私のパラメータにアクセスすることができます問題。

身体が私に理解できるヒントをいくつか与えることができれば、私はそれらを聞いてうれしいです！ :)

Answer 1

ありがとうございます、私はついにそれを動作させる方法を見つけました。

まず、私は私のsideshowbarker

if (Request.Headers.AllKeys.Contains("Origin", StringComparer.OridinalIgnoreCase) && 
    Request.HttpMethod == "OPTIONS") { 
    Response.Flush(); 
} 

を提案し、私は、私がやっていた私のヘッダで何かが欠けていたものは適用「*」すべての道はなく、最終的には、これらのパラメータでそれは

を働きました

filterContext.RequestContext.HttpContext.Response.AddHeader("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept"); 

私のクラスの最後のフォームでここに凝縮されている人は

です

using System; 
using System.Web; 
using System.Web.Mvc; 

namespace Via.Client.WebMvc 
{ 
    public class AllowCrossSiteAttribute : System.Web.Mvc.ActionFilterAttribute 
    { 
     public override void OnActionExecuting(ActionExecutingContext filterContext) 
     { 
      HttpContext ctx = System.Web.HttpContext.Current; 

      filterContext.RequestContext.HttpContext.Response.AddHeader("Access-Control-Allow-Origin", "http://localhost:4200"); 
      filterContext.RequestContext.HttpContext.Response.AddHeader("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept"); 
      filterContext.RequestContext.HttpContext.Response.AddHeader("Access-Control-Allow-Credentials", "true"); 

      if (filterContext.HttpContext.Request.HttpMethod == "OPTIONS") 
      { 
       filterContext.HttpContext.Response.Flush(); 
      } 

      base.OnActionExecuting(filterContext); 
     } 
    } 
} 

Answer 2

あなたが試したコードはすべていいです。これはうまくいくはずですが、あなたのケースではこれは機能しません。

私はコードがCORSプリフライトOPTIONS要求を行うには、ブラウザをトリガされるJavaScript

Setting Access-Control-Allow-Origin in ASP.Net MVC - simplest possible method

Answer 3

あなたのフロントエンドをそれをチェックアウトするためにあなたが持っていることについて、あなたのための参照を持っています。

https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS#Preflighted_requests

次の例のように、追加することによって、そのOPTIONS要求を処理するためのサーバー側のコードを変更する必要があります。

if (Request.Headers.AllKeys.Contains("Origin", StringComparer.OridinalIgnoreCase) && 
    Request.HttpMethod == "OPTIONS") { 
    Response.Flush(); 
} 

それとも他の多くの関連の答えのためのhttps://stackoverflow.com/search?q=%5Basp.net-mvc%5D+%5Bcors%5D+optionsを参照。