交差オリジンリクエストがAngular2でブロックされました

Question

Angular2の新機能です。 WCFのローカルマシンにサービスを作成して実行しています。文字列を返す単純なメソッドが作成され、コードが以下に示されています。

私のservice.tsファイルのAngular2アプリでそのサービスにアクセスしたいと思います。サービスメソッドにアクセスする際のコードを以下に示します。

testService(){ 
     return this._http.get('http://localhost:49753/RestServiceImpl.svc/json/4') 
     .map(res => res.json()) 
     .do(data => console.log("Testing service" + JSON.stringify(data))) 
     .catch(this.handleError); 
    } 

をしかし、私はコードを実行すると、私は下のエラーを得た：ブロック 「クロスオリジン・リクエスト：同一生成元ポリシーは、HTTPでのリモートリソースを読ん禁止します。 ... "

他のマシンでサービスをホストせずにWCFサービスを呼び出す方法はありますか？あなたが送信しているヘッダがバックエンド

のヘッダーと一致しないとあなたがこの問題を得ている

Answer 1

ですから、ヘッダ「認証」などの

contentHeaders = new Headers(); 
contentHeaders.append('Authorization', 'Basic YW5ndWxhci13YXJlaG91c2Utc2VydmljZXM6MTIzNDU2'); 
contentHeaders.append('Content-Type', 'application/json'); 
contentHeaders.append('Access-Control-Allow-Origin', '*'); 

だから、これらのヘッダを送信するフロントエンドではと仮定してみましょう、 'Content-type'、 'Access-Control-Allow-Origin'は、バックエンドで許可するヘッダーと一致する必要があります。

だから、バックエンドで「アクセス制御 - 許可 - ヘッダは、」だからここにアクセス制御 - 許可 - ヘッダであなたが送信するすべてのヘッダーに合格する必要が

res.header("Access-Control-Allow-Origin", "*"); 
res.header("Access-Control-Allow-Headers", "Authorization,content-type,Access-Control-Allow-Origin"); 

下記参照 上記のすべてのヘッダを持っている必要がありますフロントエンドから：「許可」、「コンテンツタイプ」、「アクセス制御が許可されたオリジン」。

上記の概念を使用すると完全に動作します。