http.put Chromeを使用し、Angular 2/Web APIでエラーがスローされますが、IEは使用しません

Question

テストラーナープロジェクトでWeb APIを使用して角度2を取得しようとしていますが、http.putとwonderingもし誰かがそれに光を当てることができれば。

私はオブジェクトをWeb APIにPOSTでき、そこからデータを取得できます。

Chromeを使用してPUTに問題があります。私がChromeを使用している理由は、Chromeでは動作しませんが、IEで動作します - それほど頻繁に言わないでください）

私が使用している角度2の方法はこれです。 PUTをPOSTに置き換えると、Web APIコントローラのブレークポイントにヒットできますが、PUTは使用できません。プットを使用しているとき私は

updateUser(user: UserModel) { 

    let body = JSON.stringify(user); 
    let headers = new Headers({ 'Content-Type': 'application/json' }); 
    let url: string = 'http://localhost:57465/api/user'; 

    this.http.put(url, body, { headers: headers }) 
     .map((res: Response) => res.json()) 
     .subscribe((res2) => { 
      console.log('subscribed'); 
     }); 
} 

コンソールクロームエラーメッセージ：

XMLHttpRequest cannot load http://localhost:57465/api/user. Method PUT is not allowed by Access-Control-Allow-Methods in preflight response. 

EXCEPTION: Response with status: 0 for URL: null 

ウェブAPIメソッドは、ストレートボックスの外にあります。私はまだ彼らとは何もしていない。 POSTにブレークポイントを置くと、PUTで​​はなくヒットします。

 // POST api/user 
    public void Post(User user) 
    { 
    } 

    // PUT api/user/5 
    public void Put(User user) 
    { 
    } 

ウェブAPIアクセス制御方法は、それがPOSTの場合と同様に

 protected void Application_BeginRequest(object sender, EventArgs e) 
    { 
     HttpContext.Current.Response.AddHeader("Access-Control-Allow-Origin", "*"); 
     if (HttpContext.Current.Request.HttpMethod == "OPTIONS") 
     { 
      HttpContext.Current.Response.AddHeader("Access-Control-Request-Method", "GET ,POST, PUT, DELETE"); 
      HttpContext.Current.Response.AddHeader("Access-Control-Allow-Headers", "Origin,Content-Type, Accept"); 
      HttpContext.Current.Response.AddHeader("Access-Control-Max-Age", "86400"); // 24 hours 
      HttpContext.Current.Response.End(); 
     } 
    } 

はそれをすべてのPUTのために働くべきではないのGlobal.asaxに設定されています。どのようにIEで動作するのですか？

アイデア？

Answer 1

私はこれを働かせました。 angle2側は問題ありません。 Web APIは修正が必要でした。

私は、web.configファイルこれだけです

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

に戻っCustomHeadersを入れて、この

protected void Application_BeginRequest(object sender, EventArgs e) 
    { 
     if (Request.Headers.AllKeys.Contains("Origin") && Request.HttpMethod == "OPTIONS") 
     { 
      Response.Flush(); 
     } 
    } 

にBeginRequestイベントを変更しました。