WebAPIデータを取得できません。

Question

Visual Studioには2つのアプリケーションがあります。 1つはAngular 2のWebサイトで、もう1つはWebApiプロジェクトです。 Angularサービスがデータを取得しようとしたときにヒットするWebAPIメソッドにブレークポイントがありますが、ページに何も表示されません。ブラウザコンソールを開く次のエラーが表示されます。

XMLHttpRequest cannot load http://localhost:58949/api/people. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:62761' is therefore not allowed access. 

この問題を解決するにはどうすればよいですか？ WebAPIと角度アプリケーションの両方をホストするMVCアプリケーションを作成してこの作業を行ってきましたが、私はこのソリューションが気に入らなかったのです。

Answer 1

ウェブAPI側でCORSを有効にする必要があります。

WebApiコアを使用しているとします。 "1.0.0"、

その後、CORSを有効にする： "Microsoft.AspNetCore.Corsは" - ウェブAPI側で有効になってCORSに、あなたは、まずこれらのsteps-

を行うproject.jsonに依存関係を追加する必要がありますこの場合に役立ちます

https://docs.asp.net/en/latest/security/cors.htmlを参照してください - this-

app.UseCors(builder => { 
    builder.AllowAnyOrigin().AllowAnyMethod().AllowAnyHeader(); 
}); 

ようstartup.csにあなたはここにCORSに関する詳細な情報を見つけることができます。

Answer 2

あなたが直面する問題は、ブラウザがデフォルトでクロスオリジン要求を許可しないことです。あなたは2つのウェブサイトを持っていると言いますが、それらは異なったURLを持っています。おそらくあなたの場合はlocalhost上の異なるポートでしょうが、これはまだ "異なる"起源とみなされ、セキュリティ手段です。あなたは常にあなたのWeb APIは、すべてのソースまたはあなたの角度起源のいずれかによってアクセスすることを可能にすることができます。

Access-Control-Allow-Origin: http://foo.com 
Access-Control-Allow-Methods: GET, PUT, DELETE 

ASP.NETを使用すると、定型を必要としないように、あなたのためにそれを行うことができ、パッケージに内蔵されています。あなたはそれについての詳細を読むことができますhere。基本的には、上の例のようにWeb APIの応答にヘッダーを追加するだけです。

Answer 3

私はWepApiプロジェクトでこれを使用しています。 WebApiConfig.csに入っています。

 // Use NuGet to add this: http://www.nuget.org/packages/Microsoft.AspNet.WebApi.Cors 
     config.EnableCors();