ASP.NET Web API 2 でのクロス オリジン要求を有効にします。Enable cross-origin requests in ASP.NET Web API 2

作成者Mike Wassonby Mike Wasson

ブラウザーのセキュリティは、Web ページが別のドメインに AJAX 要求を行うことを防止します。Browser security prevents a web page from making AJAX requests to another domain. この制限は同一生成元ポリシーと呼ばれ、悪意のあるサイトが別のサイトから機密データを読み取れないようにします。This restriction is called the same-origin policy, and prevents a malicious site from reading sensitive data from another site. ただし、場合がありますたい他のサイト、web API の呼び出しを使用します。However, sometimes you might want to let other sites call your web API.

クロス オリジン リソース共有(CORS) は、サーバーに同一生成元ポリシーの制限を緩和させる W3C 標準の1つです。Cross Origin Resource Sharing (CORS) is a W3C standard that allows a server to relax the same-origin policy. CORS を使用することによって、不明なリクエストは拒否しながら、一部のクロス オリジン要求のみを明示的に許可できるようになります。Using CORS, a server can explicitly allow some cross-origin requests while rejecting others. CORS は JSONP のようなかつての技術より安全でフレキシブルなものです。CORS is safer and more flexible than earlier techniques such as JSONP. このチュートリアルでは、Web API アプリケーションで CORS を有効にする方法を示します。This tutorial shows how to enable CORS in your Web API application.

このチュートリアルで使用されるソフトウェアSoftware used in the tutorial

はじめにIntroduction

このチュートリアルでは、ASP.NET Web API における CORS のサポートについて説明します。This tutorial demonstrates CORS support in ASP.NET Web API. 1 つと呼ばれる"WebService"、Web API コント ローラーをホストして、その他の呼び出された"WebClient"、web サービスを呼び出す – 2 つの ASP.NET プロジェクトの作成から始めます。We'll start by creating two ASP.NET projects – one called "WebService", which hosts a Web API controller, and the other called "WebClient", which calls WebService. 2 つのアプリケーションが別のドメインでホストされているため、WebClient から web サービスへの AJAX 要求は、クロス オリジン要求です。Because the two applications are hosted at different domains, an AJAX request from WebClient to WebService is a cross-origin request.

「同一生成元」とはWhat is "same origin"?

2 つの URL のスキーム、ホスト、ポートが同じである場合、その URL は同一生成元となります。Two URLs have the same origin if they have identical schemes, hosts, and ports. (RFC 6454)(RFC 6454)

次の 2 つの URL は生成元が同じです。These two URLs have the same origin:

  • http://example.com/foo.html
  • http://example.com/bar.html

次の URL は、上の URL とは生成元が異なります。These URLs have different origins than the previous two:

  • http://example.net - 異なるドメイン http://example.net - Different domain
  • http://example.com:9000/foo.html - 異なるポートhttp://example.com:9000/foo.html - Different port
  • https://example.com/foo.html - 異なるスキームhttps://example.com/foo.html - Different scheme
  • http://www.example.com/foo.html - 異なるサブドメインhttp://www.example.com/foo.html - Different subdomain

Note

Internet Explorer では、配信元を比較するときに、ポートは考慮されません。Internet Explorer does not consider the port when comparing origins.

Web サービス プロジェクトを作成します。Create the WebService project

Note

このセクションでは、Web API プロジェクトを作成する方法を知ってを前提としています。This section assumes you already know how to create Web API projects. そうでない場合は、次を参照してください。 ASP.NET Web API の概要します。If not, see Getting Started with ASP.NET Web API.

  1. Visual Studio を起動し、新しい作成ASP.NET Web アプリケーション (.NET Framework) プロジェクト。Start Visual Studio and create a new ASP.NET Web Application (.NET Framework) project.

  2. 新しい ASP.NET Web アプリケーションダイアログ ボックスで、プロジェクト テンプレート。In the New ASP.NET Web Application dialog box, select the Empty project template. フォルダーを追加し、参照用のコアを選択、 Web APIチェック ボックスをオンします。Under Add folders and core references for, select the Web API checkbox.

    Visual Studio で新しい ASP.NET プロジェクト ダイアログ

  3. という名前の Web API コント ローラーを追加TestControllerを次のコード。Add a Web API controller named TestController with the following code:

    using System.Net.Http;
    using System.Web.Http;
    
    namespace WebService.Controllers
    {
        public class TestController : ApiController
        {
            public HttpResponseMessage Get()
            {
                return new HttpResponseMessage()
                {
                    Content = new StringContent("GET: Test message")
                };
            }
    
            public HttpResponseMessage Post()
            {
                return new HttpResponseMessage()
                {
                    Content = new StringContent("POST: Test message")
                };
            }
    
            public HttpResponseMessage Put()
            {
                return new HttpResponseMessage()
                {
                    Content = new StringContent("PUT: Test message")
                };
            }
        }
    }
    
  4. ローカル アプリケーションを実行したり、Azure にデプロイできます。You can run the application locally or deploy to Azure. (このチュートリアルではスクリーン ショットは、アプリにデプロイされます Azure App Service Web Apps。)Web API が動作していることを確認するに移動します。http://hostname/api/test/ここで、ホスト名はアプリケーションをデプロイしたドメインです。(For the screenshots in this tutorial, the app deploys to Azure App Service Web Apps.) To verify that the web API is working, navigate to http://hostname/api/test/, where hostname is the domain where you deployed the application. 応答テキスト、"を取得します。テスト メッセージ"します。You should see the response text, "GET: Test Message".

    Web ブラウザーが表示されたテスト メッセージ

WebClient のプロジェクトを作成します。Create the WebClient project

  1. 別の作成ASP.NET Web アプリケーション (.NET Framework) 順に選択して、 MVCプロジェクト テンプレート。Create another ASP.NET Web Application (.NET Framework) project and select the MVC project template. 必要に応じて、認証の変更 > 認証なしします。Optionally, select Change Authentication > No Authentication. このチュートリアルでは、認証が不要です。You don't need authentication for this tutorial.

    Visual Studio で新しい ASP.NET プロジェクト ダイアログ ボックスで MVC テンプレート

  2. ソリューション エクスプ ローラー、ファイルを開くViews/Home/Index.cshtmlします。In Solution Explorer, open the file Views/Home/Index.cshtml. 次のようにこのファイル内のコードに置き換えます。Replace the code in this file with the following:

    <div>
        <select id="method">
            <option value="get">GET</option>
            <option value="post">POST</option>
            <option value="put">PUT</option>
        </select>
        <input type="button" value="Try it" onclick="sendRequest()" />
        <span id='value1'>(Result)</span>
    </div>
    
    @section scripts {
    <script>
        // TODO: Replace with the URL of your WebService app
        var serviceUrl = 'http://mywebservice/api/test'; 
    
        function sendRequest() {
            var method = $('#method').val();
    
            $.ajax({
                type: method,
                url: serviceUrl
            }).done(function (data) {
                $('#value1').text(data);
            }).fail(function (jqXHR, textStatus, errorThrown) {
                $('#value1').text(jqXHR.responseText || textStatus);
            });
        }
    </script>
    }
    

    ServiceUrl変数、web サービス アプリケーションの URI を使用します。For the serviceUrl variable, use the URI of the WebService app.

  3. WebClient のアプリをローカルで実行または別の web サイトに発行します。Run the WebClient app locally or publish it to another website.

表示されている HTTP メソッドを使用して web サービス アプリケーションに AJAX 要求が送信される、試してみる ボタンをクリックすると (GET、POST、または PUT) ボックスの一覧。When you click the "Try It" button, an AJAX request is submitted to the WebService app using the HTTP method listed in the dropdown box (GET, POST, or PUT). これにより、別のクロス オリジン要求を調べることができます。This lets you examine different cross-origin requests. 現時点では、ボタンをクリックした場合、エラーが表示されますので、web サービス アプリには、CORS はできません。Currently, the WebService app does not support CORS, so if you click the button you'll get an error.

ブラウザーで '試して' エラー

Note

などのツールで HTTP トラフィックを見る場合Fiddlerブラウザーは、GET 要求を送信し、要求が成功するしますが、AJAX 呼び出しには、エラーが返されますことを確認します。If you watch the HTTP traffic in a tool like Fiddler, you'll see that the browser does send the GET request, and the request succeeds, but the AJAX call returns an error. 同一オリジン ポリシーが、ブラウザーからできないことを理解することが重要送信要求。It's important to understand that same-origin policy does not prevent the browser from sending the request. 代わりに、アプリケーションが表示されるを防止、応答します。Instead, it prevents the application from seeing the response.

Fiddler web デバッガーが web 要求を表示

CORS を有効にします。Enable CORS

これで web サービス アプリで CORS を有効にしてみましょう。Now let's enable CORS in the WebService app. 最初に、CORS の NuGet パッケージを追加します。First, add the CORS NuGet package. Visual Studio から、ツールメニューの NuGet パッケージ マネージャーを選択し、パッケージ マネージャー コンソールします。In Visual Studio, from the Tools menu, select NuGet Package Manager, then select Package Manager Console. パッケージ マネージャー コンソール ウィンドウで、次のコマンドを入力します。In the Package Manager Console window, type the following command:

Install-Package Microsoft.AspNet.WebApi.Cors

このコマンドは、最新のパッケージをインストールし、core Web API のライブラリを含む、すべての依存関係を更新します。This command installs the latest package and updates all dependencies, including the core Web API libraries. 使用して、-Version特定のバージョンを対象とするフラグ。Use the -Version flag to target a specific version. CORS のパッケージには、Web API 2.0 以降が必要です。The CORS package requires Web API 2.0 or later.

ファイルを開くアプリ_Start/WebApiConfig.csします。Open the file App_Start/WebApiConfig.cs. 次のコードを追加、 WebApiConfig.Registerメソッド。Add the following code to the WebApiConfig.Register method:

using System.Web.Http;
namespace WebService
{
    public static class WebApiConfig
    {
        public static void Register(HttpConfiguration config)
        {
            // New code
            config.EnableCors();

            config.Routes.MapHttpRoute(
                name: "DefaultApi",
                routeTemplate: "api/{controller}/{id}",
                defaults: new { id = RouteParameter.Optional }
            );
        }
    }
}

次に、追加、 EnableCors属性をTestControllerクラス。Next, add the [EnableCors] attribute to the TestController class:

using System.Net.Http;
using System.Web.Http;
using System.Web.Http.Cors;

namespace WebService.Controllers
{
    [EnableCors(origins: "http://mywebclient.azurewebsites.net", headers: "*", methods: "*")]
    public class TestController : ApiController
    {
        // Controller methods not shown...
    }
}

オリジンパラメーター、WebClient のアプリケーションをデプロイした URI を使用します。For the origins parameter, use the URI where you deployed the WebClient application. これにより、WebClient から引き続き他のすべてのクロス ドメイン要求を許可中に、クロス オリジン要求ができます。This allows cross-origin requests from WebClient, while still disallowing all other cross-domain requests. パラメーターを後で説明しますEnableCorsで詳しく説明します。Later, I'll describe the parameters for [EnableCors] in more detail.

末尾にスラッシュを含めないでください、オリジンURL。Do not include a forward slash at the end of the origins URL.

更新された web サービス アプリケーションを再デプロイします。Redeploy the updated WebService application. WebClient を更新する必要はありません。You don't need to update WebClient. 今すぐ WebClient から AJAX 要求は成功する必要があります。Now the AJAX request from WebClient should succeed. GET、PUT、POST メソッドはすべて許可します。The GET, PUT, and POST methods are all allowed.

Web ブラウザーが表示されたテストが成功したメッセージ

CORS のしくみHow CORS Works

このセクションでは、HTTP メッセージのレベルでの CORS 要求での動作について説明します。This section describes what happens in a CORS request, at the level of the HTTP messages. 構成できるようにするために、CORS のしくみを理解することが重要、 EnableCors正しく属性し、期待どおりに動作しなかった場合のトラブルシューティングを行います。It's important to understand how CORS works, so that you can configure the [EnableCors] attribute correctly and troubleshoot if things don't work as you expect.

CORS の仕様には、クロス オリジン要求を有効にするいくつかの新しい HTTP ヘッダーが導入されています。The CORS specification introduces several new HTTP headers that enable cross-origin requests. ブラウザーでは、CORS をサポートする場合はクロス オリジン要求を自動的にこれらのヘッダーに設定します。JavaScript コードで特別な処理は必要ありません。If a browser supports CORS, it sets these headers automatically for cross-origin requests; you don't need to do anything special in your JavaScript code.

クロス オリジン要求の例を次に示します。Here is an example of a cross-origin request. "Origin"ヘッダーは、要求を行っているサイトのドメインを示します。The "Origin" header gives the domain of the site that is making the request.

GET http://myservice.azurewebsites.net/api/test HTTP/1.1
Referer: http://myclient.azurewebsites.net/
Accept: */*
Accept-Language: en-US
Origin: http://myclient.azurewebsites.net
Accept-Encoding: gzip, deflate
User-Agent: Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 6.2; WOW64; Trident/6.0)
Host: myservice.azurewebsites.net

サーバーは、要求を許可している場合は、アクセス制御の許可-オリジン ヘッダーを設定します。If the server allows the request, it sets the Access-Control-Allow-Origin header. このヘッダーの値は配信元のヘッダーと一致するか、ワイルドカード値は、"*"、任意のオリジンを許可することを意味します。The value of this header either matches the Origin header, or is the wildcard value "*", meaning that any origin is allowed.

HTTP/1.1 200 OK
Cache-Control: no-cache
Pragma: no-cache
Content-Type: text/plain; charset=utf-8
Access-Control-Allow-Origin: http://myclient.azurewebsites.net
Date: Wed, 05 Jun 2013 06:27:30 GMT
Content-Length: 17

GET: Test message

応答に、アクセス制御の許可-オリジン ヘッダーが含まれていない場合、AJAX 要求は失敗します。If the response does not include the Access-Control-Allow-Origin header, the AJAX request fails. 具体的には、ブラウザーには、要求が許可されていません。Specifically, the browser disallows the request. サーバーに正常な応答が返される場合でも、ブラウザーは行いません応答クライアント アプリケーションで使用できます。Even if the server returns a successful response, the browser does not make the response available to the client application.

プレフライト要求Preflight Requests

一部の CORS 要求では、ブラウザーは、リソースの実際の要求を送信する前に「プレフライト要求を」と呼ばれる追加の要求を送信します。For some CORS requests, the browser sends an additional request, called a "preflight request", before it sends the actual request for the resource.

次の条件に該当する場合、ブラウザーでプレフライト要求をスキップできます。The browser can skip the preflight request if the following conditions are true:

  • 要求メソッドが GET、HEAD、または POST、The request method is GET, HEAD, or POST, and

  • アプリケーションが承諾、Accept-language、Content-language 以外のすべての要求ヘッダーを設定していないコンテンツの種類、または最後のイベント ID、The application does not set any request headers other than Accept, Accept-Language, Content-Language, Content-Type, or Last-Event-ID, and

  • Content-type ヘッダー (場合設定) は、次の 1 つです。The Content-Type header (if set) is one of the following:

    • application/x-www-form-urlencodedapplication/x-www-form-urlencoded
    • マルチパート/フォーム データmultipart/form-data
    • テキスト/プレーンtext/plain

アプリケーションで呼び出すことによって設定されたヘッダーを要求ヘッダーについて規則が適用されるsetRequestHeader上、 XMLHttpRequestオブジェクト。The rule about request headers applies to headers that the application sets by calling setRequestHeader on the XMLHttpRequest object. (CORS の仕様は、これら「作成者要求ヘッダー」を呼び出します)。このルールは、ヘッダーには適用されません、ブラウザーユーザー エージェント、ホスト、またはコンテンツの長さなど、設定できます。(The CORS specification calls these "author request headers".) The rule does not apply to headers the browser can set, such as User-Agent, Host, or Content-Length.

プレフライト要求の例を次に示します。Here is an example of a preflight request:

OPTIONS http://myservice.azurewebsites.net/api/test HTTP/1.1
Accept: */*
Origin: http://myclient.azurewebsites.net
Access-Control-Request-Method: PUT
Access-Control-Request-Headers: accept, x-my-custom-header
Accept-Encoding: gzip, deflate
User-Agent: Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 6.2; WOW64; Trident/6.0)
Host: myservice.azurewebsites.net
Content-Length: 0

事前要求は HTTP OPTIONS メソッドを使用します。The pre-flight request uses the HTTP OPTIONS method. 2 つの特殊なヘッダーが含まれています。It includes two special headers:

  • アクセス制御の要求メソッド:実際の要求に使用される HTTP メソッド。Access-Control-Request-Method: The HTTP method that will be used for the actual request.
  • アクセス制御の要求ヘッダー。要求ヘッダーの一覧をアプリケーション実際の要求に設定します。Access-Control-Request-Headers: A list of request headers that the application set on the actual request. (ここでも、これは含まれません、ブラウザーを設定するヘッダー。)(Again, this does not include headers that the browser sets.)

サーバーが要求を許可すると仮定すると、例応答を次に示します。Here is an example response, assuming that the server allows the request:

HTTP/1.1 200 OK
Cache-Control: no-cache
Pragma: no-cache
Content-Length: 0
Access-Control-Allow-Origin: http://myclient.azurewebsites.net
Access-Control-Allow-Headers: x-my-custom-header
Access-Control-Allow-Methods: PUT
Date: Wed, 05 Jun 2013 06:33:22 GMT

応答には、許可されているメソッドを一覧表示するアクセスの制御-許可する-メソッド ヘッダーと、必要に応じて、アクセスの制御-許可する-ヘッダー ヘッダー、許可されたヘッダーの一覧を表示するが含まれます。The response includes an Access-Control-Allow-Methods header that lists the allowed methods, and optionally an Access-Control-Allow-Headers header, which lists the allowed headers. プレフライト要求が成功すると、ブラウザーは、前述のように、実際の要求を送信します。If the preflight request succeeds, the browser sends the actual request, as described earlier.

プレフライト OPTIONS 要求でエンドポイントをテストによく使用されるツール (たとえば、 FiddlerPostman) 既定では、必要なオプションのヘッダーを送信しません。Tools commonly used to test endpoints with preflight OPTIONS requests (for example, Fiddler and Postman) don't send the required OPTIONS headers by default. いることを確認、Access-Control-Request-MethodAccess-Control-Request-Headersヘッダーが要求と共に送信されると、オプションのヘッダーが IIS を使用してアプリにアクセスします。Confirm that the Access-Control-Request-Method and Access-Control-Request-Headers headers are sent with the request and that OPTIONS headers reach the app through IIS.

ASP.NET アプリを受信し、オプションの要求を処理できるように IIS を構成するには、アプリの次の構成を追加web.configファイル、<system.webServer><handlers>セクション。To configure IIS to allow an ASP.NET app to receive and handle OPTION requests, add the following configuration to the app's web.config file in the <system.webServer><handlers> section:

<system.webServer>
  <handlers>
    <remove name="ExtensionlessUrlHandler-Integrated-4.0" />
    <remove name="OPTIONSVerbHandler" />
    <add name="ExtensionlessUrlHandler-Integrated-4.0" path="*." verb="*" type="System.Web.Handlers.TransferRequestHandler" preCondition="integratedMode,runtimeVersionv4.0" />
  </handlers>
</system.webServer>

削除OPTIONSVerbHandlerIIS が OPTIONS 要求を処理するを防ぎます。The removal of OPTIONSVerbHandler prevents IIS from handling OPTIONS requests. 置換ExtensionlessUrlHandler-Integrated-4.0の既定のモジュールの登録は拡張子のない Url に GET、HEAD、POST、およびデバッグの要求のみを許可するため、アプリに到達するオプションの要求を許可します。The replacement of ExtensionlessUrlHandler-Integrated-4.0 allows OPTIONS requests to reach the app because the default module registration only allows GET, HEAD, POST, and DEBUG requests with extensionless URLs.

EnableCors のスコープ規則Scope Rules for [EnableCors]

アクション、コント ローラーごと、またはすべての Web API コント ローラーをグローバルにあたり、アプリケーションで CORS を有効にできます。You can enable CORS per action, per controller, or globally for all Web API controllers in your application.

アクションごとPer Action

1 つのアクションで CORS を有効にするには設定、 EnableCorsアクション メソッドの属性。To enable CORS for a single action, set the [EnableCors] attribute on the action method. 次の例での CORS、GetItemメソッドのみです。The following example enables CORS for the GetItem method only.

public class ItemsController : ApiController
{
    public HttpResponseMessage GetAll() { ... }

    [EnableCors(origins: "http://www.example.com", headers: "*", methods: "*")]
    public HttpResponseMessage GetItem(int id) { ... }

    public HttpResponseMessage Post() { ... }
    public HttpResponseMessage PutItem(int id) { ... }
}

コント ローラーごとPer Controller

設定した場合EnableCorsコント ローラー クラスで、コント ローラーのすべてのアクションに適用されます。If you set [EnableCors] on the controller class, it applies to all the actions on the controller. アクションに対して CORS を無効にする追加のDisableCors属性をアクションにします。To disable CORS for an action, add the [DisableCors] attribute to the action. 次の例では、CORS を有効を除くすべてのメソッドに対してPutItemします。The following example enables CORS for every method except PutItem.

[EnableCors(origins: "http://www.example.com", headers: "*", methods: "*")]
public class ItemsController : ApiController
{
    public HttpResponseMessage GetAll() { ... }
    public HttpResponseMessage GetItem(int id) { ... }
    public HttpResponseMessage Post() { ... }

    [DisableCors]
    public HttpResponseMessage PutItem(int id) { ... }
}

グローバルにGlobally

アプリケーション内のすべての Web API コント ローラーで CORS を有効にするのには、渡す、 EnableCorsAttributeインスタンスをEnableCorsメソッド。To enable CORS for all Web API controllers in your application, pass an EnableCorsAttribute instance to the EnableCors method:

public static class WebApiConfig
{
    public static void Register(HttpConfiguration config)
    {
        var cors = new EnableCorsAttribute("www.example.com", "*", "*");
        config.EnableCors(cors);
        // ...
    }
}

1 つ以上のスコープで、属性を設定した場合の優先順位には。If you set the attribute at more than one scope, the order of precedence is:

  1. アクションAction
  2. コントローラーController
  3. GlobalGlobal

許可されるオリジンを設定します。Set the allowed origins

オリジンのパラメーター、 EnableCors属性は、リソースのアクセスを許可するオリジンを指定します。The origins parameter of the [EnableCors] attribute specifies which origins are allowed to access the resource. 値が、許可されたオリジンのコンマ区切り一覧です。The value is a comma-separated list of the allowed origins.

[EnableCors(origins: "http://www.contoso.com,http://www.example.com", 
    headers: "*", methods: "*")]

ワイルドカード値を使用することもできます。"*"任意のオリジンからの要求を許可します。You can also use the wildcard value "*" to allow requests from any origins.

任意のオリジンからの要求を許可する前に慎重に検討してください。Consider carefully before allowing requests from any origin. あらゆる web サイトが web API への AJAX 呼び出しを実行できることを意味します。It means that literally any website can make AJAX calls to your web API.

// Allow CORS for all origins. (Caution!)
[EnableCors(origins: "*", headers: "*", methods: "*")]

許可される HTTP メソッドを設定します。Set the allowed HTTP methods

メソッドのパラメーター、 EnableCors属性は、どの HTTP メソッドは、リソースへのアクセス許可を指定します。The methods parameter of the [EnableCors] attribute specifies which HTTP methods are allowed to access the resource. すべてのメソッドを許可するワイルドカード値を使用して、"*"。To allow all methods, use the wildcard value "*". 次の例では、GET と POST の要求のみを許可します。The following example allows only GET and POST requests.

[EnableCors(origins: "http://www.example.com", headers: "*", methods: "get,post")]
public class TestController : ApiController
{
    public HttpResponseMessage Get() { ... }
    public HttpResponseMessage Post() { ... }
    public HttpResponseMessage Put() { ... }    
}

許可されている要求ヘッダーを設定します。Set the allowed request headers

この記事では、プレフライト要求がアプリケーションで設定される HTTP ヘッダーの一覧を表示するアクセス制御の要求ヘッダー ヘッダーを含めることがあります以前方法を説明 (いわゆる"author 要求ヘッダー")。This article described earlier how a preflight request might include an Access-Control-Request-Headers header, listing the HTTP headers set by the application (the so-called "author request headers"). ヘッダーのパラメーター、 EnableCors属性を指定する作成者の要求ヘッダーが許可されます。The headers parameter of the [EnableCors] attribute specifies which author request headers are allowed. すべてのヘッダーは、次のように設定します。ヘッダーに"*"。To allow any headers, set headers to "*". ホワイト リストの特定のヘッダーを次のように設定します。ヘッダーが許可されるヘッダーのコンマ区切りのリストに。To whitelist specific headers, set headers to a comma-separated list of the allowed headers:

[EnableCors(origins: "http://example.com", 
    headers: "accept,content-type,origin,x-my-header", methods: "*")]

ただし、ブラウザーでは、このアクセス制御の要求ヘッダーを設定する方法で完全に一貫性がありません。However, browsers are not entirely consistent in how they set Access-Control-Request-Headers. たとえば、Chrome では、"origin"現在含まれています。For example, Chrome currently includes "origin". FireFox では、スクリプトでアプリケーションを設定している場合でも、「受け入れ」などの標準ヘッダーは含まれません。FireFox does not include standard headers such as "Accept", even when the application sets them in script.

設定した場合ヘッダー以外の値を"*"を含める必要がある、少なくとも"accept"、「コンテンツの種類」と"origin"、およびサポートするカスタム ヘッダー。If you set headers to anything other than "*", you should include at least "accept", "content-type", and "origin", plus any custom headers that you want to support.

許可される応答ヘッダーを設定します。Set the allowed response headers

既定では、ブラウザーは公開されませんすべてのアプリケーションに応答ヘッダー。By default, the browser does not expose all of the response headers to the application. 既定で使用できる応答ヘッダーは次のとおりです。The response headers that are available by default are:

  • キャッシュ制御Cache-Control
  • コンテンツの言語Content-Language
  • Content-TypeContent-Type
  • 有効期限が切れますExpires
  • Last-ModifiedLast-Modified
  • プラグマPragma

CORS の仕様を呼び出す単純な応答ヘッダーします。The CORS spec calls these simple response headers. で他のヘッダーをアプリケーションに使用できるようにするには設定、 exposedHeadersパラメーターのEnableCorsします。To make other headers available to the application, set the exposedHeaders parameter of [EnableCors].

次の例で、コント ローラーのGetメソッドが 'X カスタム ヘッダー' という名前のカスタム ヘッダーを設定します。In the following example, the controller's Get method sets a custom header named ‘X-Custom-Header'. 既定では、ブラウザーでは、クロス オリジン要求では、このヘッダーは公開しません。By default, the browser will not expose this header in a cross-origin request. ヘッダーを使用できるようにするに 'X カスタム ヘッダー' を含めるexposedHeadersします。To make the header available, include ‘X-Custom-Header' in exposedHeaders.

[EnableCors(origins: "*", headers: "*", methods: "*", exposedHeaders: "X-Custom-Header")]
public class TestController : ApiController
{
    public HttpResponseMessage Get()
    {
        var resp = new HttpResponseMessage()
        {
            Content = new StringContent("GET: Test message")
        };
        resp.Headers.Add("X-Custom-Header", "hello");
        return resp;
    }
}

クロス オリジン要求で資格情報を渡すPass credentials in cross-origin requests

資格情報では、CORS 要求で特別な処理が必要です。Credentials require special handling in a CORS request. 既定では、ブラウザーは、クロス オリジン要求と共に資格情報を送信しません。By default, the browser does not send any credentials with a cross-origin request. 資格情報には、cookie として HTTP 認証方式がなどがあります。Credentials include cookies as well as HTTP authentication schemes. クロス オリジン要求に資格情報を送信するクライアントを設定する必要がありますXMLHttpRequest.withCredentialsを true にします。To send credentials with a cross-origin request, the client must set XMLHttpRequest.withCredentials to true.

使用してXMLHttpRequest直接。Using XMLHttpRequest directly:

var xhr = new XMLHttpRequest();
xhr.open('get', 'http://www.example.com/api/test');
xhr.withCredentials = true;

Jquery では。In jQuery:

$.ajax({
    type: 'get',
    url: 'http://www.example.com/api/test',
    xhrFields: {
        withCredentials: true
    }

さらに、サーバーは、資格情報を許可する必要があります。In addition, the server must allow the credentials. Web API でクロス オリジンの資格情報をできるように、設定、 SupportsCredentialsプロパティを true に、 EnableCors属性。To allow cross-origin credentials in Web API, set the SupportsCredentials property to true on the [EnableCors] attribute:

[EnableCors(origins: "http://myclient.azurewebsites.net", headers: "*", 
    methods: "*", SupportsCredentials = true)]

このプロパティが true の場合、HTTP 応答には、アクセス コントロール-許可する-資格情報のヘッダーが含まれます。If this property is true, the HTTP response will include an Access-Control-Allow-Credentials header. このヘッダーは、サーバーは、クロス オリジン要求の資格情報をブラウザーに指示します。This header tells the browser that the server allows credentials for a cross-origin request.

ブラウザーが資格情報を送信、応答が有効なアクセス制御を許可する-資格情報のヘッダーに含まれない場合は、ブラウザーは、アプリケーションへの応答を公開しないと、AJAX 要求は失敗します。If the browser sends credentials, but the response does not include a valid Access-Control-Allow-Credentials header, the browser will not expose the response to the application, and the AJAX request fails.

設定に関する注意SupportsCredentialsを true に別のドメインに web サイトは、ユーザーを認識することがなく、ユーザーの代わりに、Web API へのログイン ユーザーの資格情報を送信することができますが行われるためです。Be careful about setting SupportsCredentials to true, because it means a website at another domain can send a logged-in user's credentials to your Web API on the user's behalf, without the user being aware. CORS の仕様もその設定を示すオリジンに" * "有効でない場合SupportsCredentialsが true。The CORS spec also states that setting origins to "*" is invalid if SupportsCredentials is true.

カスタムの CORS ポリシー プロバイダーCustom CORS policy providers

EnableCors実装の属性、 ICorsPolicyProviderインターフェイス。The [EnableCors] attribute implements the ICorsPolicyProvider interface. 派生したクラスを作成して、独自の実装を行うことができます属性実装とICorsPolicyProviderします。You can provide your own implementation by creating a class that derives from Attribute and implements ICorsPolicyProvider.

[AttributeUsage(AttributeTargets.Method | AttributeTargets.Class, AllowMultiple = false)]
public class MyCorsPolicyAttribute : Attribute, ICorsPolicyProvider 
{
    private CorsPolicy _policy;

    public MyCorsPolicyAttribute()
    {
        // Create a CORS policy.
        _policy = new CorsPolicy
        {
            AllowAnyMethod = true,
            AllowAnyHeader = true
        };

        // Add allowed origins.
        _policy.Origins.Add("http://myclient.azurewebsites.net");
        _policy.Origins.Add("http://www.contoso.com");
    }

    public Task<CorsPolicy> GetCorsPolicyAsync(HttpRequestMessage request)
    {
        return Task.FromResult(_policy);
    }
}

任意の場所にする場合は、属性を適用するようになりましたEnableCorsします。Now you can apply the attribute any place that you would put [EnableCors].

[MyCorsPolicy]
public class TestController : ApiController
{
    .. //

たとえば、カスタム CORS ポリシー プロバイダーは、構成ファイルから設定を読み取る可能性があります。For example, a custom CORS policy provider could read the settings from a configuration file.

属性を使用する代わりに、登録することができます、 ICorsPolicyProviderFactoryオブジェクトを作成するICorsPolicyProviderオブジェクト。As an alternative to using attributes, you can register an ICorsPolicyProviderFactory object that creates ICorsPolicyProvider objects.

public class CorsPolicyFactory : ICorsPolicyProviderFactory
{
    ICorsPolicyProvider _provider = new MyCorsPolicyProvider();

    public ICorsPolicyProvider GetCorsPolicyProvider(HttpRequestMessage request)
    {
        return _provider;
    }
}

設定する、 ICorsPolicyProviderFactoryを呼び出し、 SetCorsPolicyProviderFactory起動時に次のように、拡張メソッド。To set the ICorsPolicyProviderFactory, call the SetCorsPolicyProviderFactory extension method at startup, as follows:

public static class WebApiConfig
{
    public static void Register(HttpConfiguration config)
    {
        config.SetCorsPolicyProviderFactory(new CorsPolicyFactory());
        config.EnableCors();

        // ...
    }
}

ブラウザー サポートBrowser support

Web API CORS パッケージは、サーバー側テクノロジです。The Web API CORS package is a server-side technology. ユーザーのブラウザーが CORS をサポートするためにも必要です。The user's browser also needs to support CORS. 幸いにも、すべての主要なブラウザーの現在のバージョンを含めるcors サポートします。Fortunately, the current versions of all major browsers include support for CORS.