ASP.NET Core の Cors

Corsってなに？と思っていたら、思わず使う機会が登場したのでメモ。

参考：

ASP.NET Core and CORS Gotchas - Rick Strahl's Web Log

クロスサイトスクリプティングといって、javascriptの非同期httpモジュールがアクセスする際、原則的に取得サーバ以外のサイトへは取りに行けないというセキュリティ的な制限がある。対して、制限緩めてもよいよと取得先のサーバ側から、お墨付きがもらえていたらその制限を突破して本来の(Origin)サーバ以外からのスクリプトでアクセスしても取得できるというもの。

開発環境はVisualStudio2015 community と、angular-cliで作業している。angular-cli  「ng serve コマンド」で lite-server (localhost:4200) を立ち上げてClientサイドの開発をしつつ、Visual Studio もデバッグ実行して(localhost:532xx)、IIS Express上にあるWebApiを呼び出している。

そうするとポートの違う別オリジンとなって、クロスサイトスクリプティングに引っかかる。

サーバ側(ASP.NET Core）の設定でこいつを許可させるため、レスポンスヘッダーに、次のヘッダ情報を埋め込ませるおまじないを出させないといけない。

Access-Control-Allow-Origin: http://localhost:xxxx

Startup.cs

public void ConfigureServices(IServiceCollection services)
{
// snip

services.AddCors(option => option.AddPolicy("Any",
policy => policy.AllowAnyOrigin()));

services.AddMvc();

//snip
}

public void Configure(IApplicationBuilder app, IHostingEnvironment env, ILoggerFactory loggerFactory,ShopDbContext db)
{
// snip

app.UseCors("Any");

app.UseMvc(routes =>
{
routes.MapRoute(
name: "default",
template: "{controller=Home}/{action=Index}/{id?}");
});
// snip
}

 Configure の中で UseCorsとするとすべてで適用される。

上記の場合は、 Originだけを許しているけど、

ほかにも　
.AllowAnyMethod()

.AllowAnyHeader()

.AllowCredentials()

なんてのがある。

注意：UseMvc() の前に登録することが重要。順番が大事

また、UseCors()で登録しないで、Controlerクラスかメソッド単位で[EnableCors("ポリシー名")] とすることも可能。

ポリシー名は、ConfigureService内で定義したポリシーセットの名前、上の例では "Any"がそれにあたる。