Angular2 HTTP POSTでJSONリクエストヘッダーを設定する

Question

私の投稿要求にcontent-typeのapplication/jsonヘッダーを設定できません。

saveUpdates(alltabs: AllTabs): Observable<Response> { 
      let api = this.host + this.routes.save; 
      let headers = new Headers(); 
      headers.append('Content-Type', 'application/json'); 

      return this._http.post(api, JSON.stringify(alltabs), { headers: headers }) 
      .map((response: Response) => <Response>response.json()) 
      .do(data => console.log("saveUpdates(): " + data)) 
      .catch(this.handleError); 
    } 

リクエストヘッダ：

OPTIONS /api/productsave HTTP/1.1 
Host: wbtest:92 
Connection: keep-alive 
Pragma: no-cache 
Cache-Control: no-cache 
Access-Control-Request-Method: POST 
Origin: http://localhost:3000 
User-Agent: Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/51.0.2704.84 Safari/537.36 
Access-Control-Request-Headers: content-type 
Accept: */* 
Referer: http://localhost:3000/product/60000010080 
Accept-Encoding: gzip, deflate, sdch 
Accept-Language: en-US,en;q=0.8 

レスポンスヘッダ：

HTTP/1.1 405 Method Not Allowed 
Cache-Control: no-cache 
Pragma: no-cache 
Allow: POST 
Content-Type: application/json; charset=utf-8 
Expires: -1 
Server: Microsoft-IIS/7.5 
X-AspNet-Version: 4.0.30319 
X-Powered-By: ASP.NET 
Access-Control-Allow-Origin: * 
Date: Tue, 14 Jun 2016 15:16:15 GMT 
Content-Length: 76 

あなたが見ることができるように、私の要求は、2つの予想外のヘッダが "アクセス・コントロール・リクエスト・ヘッダ" を追加しましたと」アクセス制御要求方式」を参照してください。これはCORS（Cross-Origin Resource Sharing）の問題を示唆しているようです。ただし、APIサーバー上のweb.confファイルは動作しており、応答ヘッダーには「Access-Control-Allow-Origin：*」と表示されます。

何が間違っている可能性がありますか？

UPDATE：

上記のコードが正しい - 問題はないプリフライト要求を処理するように構成されSeverのコードです。私の場合、.NET Web API 2アプリケーションはCORSを許可するように構成されていませんでした。

Answer 1

CORSでは、2種類のリクエストがあります。

• シンプルリクエスト：実際のところ、CORSの仕様は、2つの異なるユースケースを区別します。この使用例は、HTTPのGET、HEAD、POSTメソッドを使用する場合に適用されます。 POSTメソッドの場合は、text/plain,application/x-www-form-urlencodedおよびmultipart/form-dataのコンテンツタイプのみがサポートされています。
• プリフライトリクエスト。 「単純要求」ユースケースが適用されない場合、クロスドメイン要求のコンテキストで何ができるかを確認するために、最初の要求（HTTP OPTIONSメソッドを使用）が行われます。

サーバーがプリフライトリクエストをサポートするように設定されていないようです。 405ステータスコード（405 Method Not Allowed）の理由。

詳細はこちらの記事を参照してください。

• http://restlet.com/blog/2015/12/15/understanding-and-using-cors/