Angular 2 AspNetCore WebApi CORSの問題：プリフライトの応答に無効なHTTPステータスコードがある401

Question

Visual Studio 2015で実装したAspNetCore WebApiプロジェクトに対してAngular 2 RC6アプリケーションで単純なトークンベースの認証を実装しようとしています。

サンプルアプリケーションをgithubに入れました。https://github.com/tonywr71/Snazzleは完全に機能するアプリケーションです。

アプリケーションでは、[ログイン]メニュー項目をクリックし、ログイン情報とパスワード情報を入力して[ログイン]をクリックします。

認証トークンが正常に返されました。私は独立したストレージに格納します。

次に、[Fetch Data]メニュー項目をクリックすると、Authorize属性を持つサンプルコントローラが呼び出されます。トークンは渡され、分離されたストレージから取得され、ヘッダーに追加されます。しかし、それはエラーで失敗します。私は取得していますエラーがある

「のXMLHttpRequestをロードすることはできませんhttp://localhost:5100/api/SampleData/WeatherForecasts。プリフライトの応答が無効なHTTPステータスコード401を持っている」

WeatherForecastsは角2クライアントコンポーネントによって消費されるいくつかのJSONを返すWebAPIの方法です。

401は許可されていません。ヘッダーはORIGIN呼び出しのために送信されないため、許可されていない理由は、プリフライトORIGIN呼び出しによるものです。

私がPostmanで実行すると、トークンが追加されても問題はありません。メソッド呼び出しが機能します。それは、郵便配達員がCORSについて心配する必要がないからです。

私の質問は、AspNetCoreに認証のORIGIN呼び出しをチェックさせないようにするにはどうすればいいですか？それが正しいアプローチではない場合、どうすればこれを達成することができますか？私が追加するはずのミドルウェアはありますか？

Answer 1

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

、あなたはこれらのsteps-

最初に行う必要があります、project.jsonに依存関係を追加 - "Microsoft.AspNetCore.Cors": "1.0.0",

を、その後this-

ようstartup.csでCORSを有効にします場合

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

あなたが特定の原点に制限したい場合、あなたはthis-

app.UseCors(builder => builder.WithOrigins("example.com")); 

のように行うことができます

詳細については、CORS here

こちらをご覧ください。

Answer 2

これは私に役立ちました：

スタートアップに移動します。

app.UseCors("CorsPolicy");