asp.net Web APIでCORSを有効にする方法は?

asp.net Web APIでCORSを有効にする方法は?

これは、APS.NET Web API で CORS を有効にするための最も簡単なハウツー ガイドと考えてください。この記事のすべての手順を確認して、今すぐ詳細をご覧ください。

6min read

次のエラーに遭遇したことがありますか?

クロスオリジン要求がブロックされました。同一生成元ポリシーでは、リソースの読み取りが許可されていません

  1. Scheme (HTTP)
  2. Host (server)
  3. Port (8888)

Originは、Scheme、Host、およびポート番号で構成されます。

Originは、Scheme、Host、およびポート番号で構成されます。

2つのリソースがスキーム、ホスト、およびポートの組み合わせが同じ場合、それらは同じオリジンと見なされ、それ以外の場合はクロスオリジンと見なされます。 次の 2 つの URI について考えてみましょう

http://abc.com:80とhttp://xyz.com:8080は、ホストとポートが同じではないため、同じオリジンではありません。セキュリティ上の理由から、これら 2 つの URL 間のリソース共有が制限される場合があります。XMLHttpRequestの例でCORSを理解してみましょう。XMLHttpRequest を使用して、HTML ドキュメントからサーバー上で HTTP 操作を実行します。XMLHttpRequest では、次の 2 つの URL が使用されます。

  1. 要求された URL またはサーバーの URL
  2. リクエストを開始したドキュメントのURL

両方のURLのスキーム、ホスト、ポートが同じ場合、XMLHttpRequestオブジェクトが操作を実行し、それ以外の場合はセキュリティ上の理由からHTTP操作をブロックします。

サーバーとブラウザの両方がCORSをサポートしている必要があります。デフォルトでは、最近のすべてのブラウザはCORSをサポートしていますが、API開発者として、Web APIでCORSのサポートを有効にする必要があります。

CORS in ASP.NET Web API

ここでは、次の図に示すように、クラスの配列を返す非常に単純な ASP.NET Web APIを作成しました。

クラスの配列を返す非常に単純な ASP.NET Web APIを作成しました

ご覧のとおり、Web API はポート 8458 で実行されています。 次に、ポート 5901 の URI で実行されている JavaScript アプリケーションでデータを取得しようとしています。

ポート5901のURIで実行されているJavaScriptアプリケーションでデータを取得しようとしています

HTML ドキュメントでは、XMLHttpRequest オブジェクトを使用して HTTP 呼び出しを行っています。Web API の URI (要求されたリソースの URI) と HTML ドキュメント (要求の発信元の URL) が同じではないため、XMLHttpRequest オブジェクトは同じ起源ではないため、リソース共有をブロックしていることは明らかです。ブラウザでは、下の画像に示すように例外が発生する可能性が非常に高いです。

バグをさらに掘り下げてみましょう。ブラウザで、開発者ツールとネットワークタブを開きます。OriginとHostは、次の画像に示すように、Request Headerにあります。両方が同じではなく、CORSがユーザーエージェントXMLHttpRequestによって許可されていないことは明らかです。

CORS は、ユーザーエージェント XMLHttpRequest によって許可されません

応答ヘッダーを見ると、Access-Control-Allow-Originに関する情報はありません。

応答ヘッダーを見ると、Access-Control-Allow-Originに関する情報はありません

サーバーはヘッダー内のリソースにアクセスできるオリジンについての応答を送信しないため、XMLHttpRequest オブジェクトはブラウザーでのリソース共有をブロックします。 先に進んで、Web API の CORS サポートを有効にしましょう。

Enabling CORS in ASP.NET Web API

ASP.NET Web API 2.0 で CORS を有効にするには、まず、Microsoft.AspNet.WebApi.Cors パッケージをプロジェクトに追加する必要があります。次の図に示すように、コマンド プロンプトを選択してパッケージをインストールするか、NuGet マネージャーを検索してインストールすることができます。

ASP.NET Web API 2.0 で CORS を有効にするには、まず、Microsoft.AspNet.WebApi.Cors パッケージをプロジェクトに追加する必要があります

Web API の CORS サポートは、次の 3 つのレベルで構成できます。

  1. グローバルレベルで
  2. コントローラー レベル
  3. アクション レベルでは、

グローバル レベルで CORS サポートを構成するには、まず CORS パッケージをインストールしてから、App_StartフォルダーからWebApiConfig.csファイルを開きます。

var cors = new EnableCorsAttribute("http://localhost:5901", "*", "*");
config.EnableCors(cors);

グローバル レベルで CORS を有効にした後、Web API を再度ホストし、要求ヘッダーと応答ヘッダーを調べます。また、Enable CORS 属性で、Origin URL を JavaScript アプリの URL に設定していることに注意してください。

Web API サーバーは、次の図に示すように、応答ヘッダーに Access-Control-Allow-Origin というヘッダーを追加しています。応答ヘッダーの Access-Control-Allow-Origin ヘッダーの URL と要求ヘッダーの Origin ヘッダーの URL は同じである必要があり、その場合は XMLHttpRequest のみが CORS 操作を許可します。場合によっては、Access-Control-Allow-Origin 応答ヘッダーの値がワイルドカード文字* に設定されます。これは、サーバーが特定のオリジンではなく、すべてのオリジンに対してCORSサポートを許可することを意味します。

Web API server is adding an extra header Access-Control-Allow-Origin

サーバーでCORSサポートを有効にしているため、例外は発生せず、データはブラウザで取得する必要があります。

前に説明したように、ASP.NET Web API では、CORS サポートを 3 つの異なるレベルで有効にできます。

  1. アクション レベルでは、
  2. コントローラー レベル
  3. グローバルレベルで

アクションレベルでのCORSの有効化

CORS サポートは、次のリストに示すように、アクション レベルで有効にできます。

[EnableCors(origins: "http://localhost:5901", headers: "*", methods: "*")]
public HttpResponseMessage GetItem(int id)
{
   // Code here
}

上記のコード一覧では、GetItem アクションの CORS を有効にしています。また、値を star に設定することで、すべてのヘッダーを許可し、すべての HTTP メソッドをサポートするようにパラメーターを設定しています。

コントローラーレベルでのCORSの有効化

CORS サポートは、次のリストに示すように、コントローラー レベルで有効にできます。

[EnableCors(origins: "http://localhost:5901", headers: "*", methods: "*")]
public class ClassesController : ApiController {}

上記のコードリストでは、クラスコントローラーのCORSを有効にしています。また、値を star に設定することで、すべてのヘッダーを許可し、すべての HTTP メソッドをサポートするようにパラメーターを設定しています。[DisableCors] 属性を使用して、CORS サポートからアクションの 1 つを除外できます。

グローバルレベルでのCORSの有効化

グローバル レベルで CORS サポートを構成するには、まず CORS パッケージをインストールしてから、App_StartフォルダーからWebApiConfig.csファイルを開きます。

var cors = new EnableCorsAttribute("http://localhost:5901", "*", "*");
config.EnableCors(cors);

属性を複数のスコープで設定する場合、優先順位は次のとおりです。

属性を複数のスコープ (優先順位) に設定します

EnableCorsの属性

1.       Origins:コンマで区切られた複数のorigins値を設定できます。 任意のオリジンで API に AJAX リクエストを送信する場合は、origin 値をワイルドカード値 star に設定します。

2.       Request ヘッダー: Request ヘッダー パラメーターは、許可される要求ヘッダーを指定します。任意のヘッダー設定値を許可するには、値を * に設定します

3.       HTTP メソッド: methods パラメータは、リソースへのアクセスを許可する HTTP メソッドを指定します。すべてのメソッドを許可するには、ワイルドカード値 "*" を使用します。それ以外の場合は、メソッド名をカンマ区切りにして、一連のメソッドがリソースにアクセスできるようにします。

これらをまとめると、2 つのオリジン、すべてのヘッダーに対して CORS を有効にし、次のリストに示すように post 操作と get 操作を行うことができます。

[EnableCors(origins: "http://localhost:5901,http://localhost:8768", headers: "*", methods: "post,get")]
public class ClassesController : ApiController {}

必要に応じて、Web API に資格情報を渡してカスタム ポリシーを作成することもできますが、ASP.NET Web API での CORS の基本に関するこの投稿を見つけていただければ幸いです。何か追加したいことがありますか?以下でコメントを共有してください!

操作方法
デモを予約