ASP.NET Core でのクロス オリジン要求 (CORS) を有効にします。Enable Cross-Origin Requests (CORS) in ASP.NET Core

作成者 Mike WassonShayne Boyer、および Tom DykstraBy Mike Wasson, Shayne Boyer, and Tom Dykstra

ブラウザーのセキュリティは、web ページが web ページを提供するものとは異なるドメインに要求を行うことを防ぎます。Browser security prevents a web page from making requests to a different domain than the one that served the web page. この制限と呼ばれる、同一オリジン ポリシーします。This restriction is called the same-origin policy. 同一オリジン ポリシーは、悪意のあるサイトが別のサイトから機密データを読み取ることを防ぎます。The same-origin policy prevents a malicious site from reading sensitive data from another site. 場合によっては、他のサイトでは、クロス オリジン要求を行うアプリに許可する可能性があります。Sometimes, you might want to allow other sites make cross-origin requests to your app.

クロス オリジン リソース共有(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. このトピックでは、ASP.NET Core アプリで CORS を有効にする方法を示します。This topic shows how to enable CORS in an ASP.NET Core app.

同じ生成元Same origin

同じスキーム、ホスト、およびポートがある場合、2 つの Url が同じ配信元がある (RFC 6454)。Two URLs have the same origin if they have identical schemes, hosts, and ports (RFC 6454).

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

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

これらの Url があるさまざまなオリジンより前の 2 つの Url:These URLs have different origins than the previous two URLs:

  • https://example.net – 別のドメインhttps://example.net – Different domain
  • https://www.example.com/foo.html – 別のサブドメインhttps://www.example.com/foo.html – Different subdomain
  • http://example.com/foo.html – 別の配色http://example.com/foo.html – Different scheme
  • https://example.com:9000/foo.html – 別のポートhttps://example.com:9000/foo.html – Different port

注意

Internet Explorer は、生成元を比較するときにポートを考慮しません。Internet Explorer doesn't consider the port when comparing origins.

CORS のサービスを登録します。Register CORS services

参照、 Microsoft.AspNetCore.App メタパッケージへのパッケージ参照を追加したり、 Microsoft.AspNetCore.Corsパッケージ。Reference the Microsoft.AspNetCore.App metapackage or add a package reference to the Microsoft.AspNetCore.Cors package.

参照、 Microsoft.AspNetCore.All メタパッケージへのパッケージ参照を追加したり、 Microsoft.AspNetCore.Corsパッケージ。Reference the Microsoft.AspNetCore.All metapackage or add a package reference to the Microsoft.AspNetCore.Cors package.

パッケージ参照を追加、 Microsoft.AspNetCore.Corsパッケージ。Add a package reference to the Microsoft.AspNetCore.Cors package.

呼び出すAddCorsStartup.ConfigureServicesCORS サービス アプリのサービス コンテナーを追加します。Call AddCors in Startup.ConfigureServices to add CORS services to the app's service container:

public void ConfigureServices(IServiceCollection services)
{
    services.AddCors();
}

CORS を有効にします。Enable CORS

CORS のサービスを登録すると、ASP.NET Core アプリで CORS を有効にするのに方法を次のいずれかを使用します。After registering CORS services, use either of the following approaches to enable CORS in an ASP.NET Core app:

  • CORS ミドルウェア–ミドルウェアを使用してアプリをグローバルに適用する CORS ポリシー。CORS Middleware – Apply CORS policies globally to the app via middleware.
  • MVC で CORS –アクションごとまたはコント ローラーごとに適用する CORS ポリシー。CORS in MVC – Apply CORS policies per action or per controller. CORS ミドルウェアは使用されません。CORS Middleware isn't used.

CORS ミドルウェアで CORS を有効にします。Enable CORS with CORS Middleware

CORS ミドルウェアは、アプリへのクロス オリジン要求を処理します。CORS Middleware handles cross-origin requests to the app. 要求処理パイプラインでは、CORS ミドルウェアを有効にするを呼び出して、UseCors拡張メソッドでStartup.Configureします。To enable CORS Middleware in the request processing pipeline, call the UseCors extension method in Startup.Configure.

CORS ミドルウェアする必要がありますの前に、エンドポイントが定義されて、アプリでのクロス オリジン要求をサポートする (たとえば、呼び出しの前にUseMvcMVC と Razor ページのミドルウェアの)。CORS Middleware must precede any defined endpoints in your app where you want to support cross-origin requests (for example, before the call to UseMvc for MVC/Razor Pages Middleware).

Aクロス オリジン ポリシーを使用して、CORS ミドルウェアを追加するときに指定することができます、CorsPolicyBuilderクラス。A cross-origin policy can be specified when adding the CORS Middleware using the CorsPolicyBuilder class. CORS ポリシーを定義するための 2 つの方法はあります。There are two approaches for defining a CORS policy:

  • 呼び出すUseCorsラムダで。Call UseCors with a lambda:

    public void Configure(IApplicationBuilder app, IHostingEnvironment env, ILoggerFactory loggerFactory)
    {
        loggerFactory.AddConsole();
    
        if (env.IsDevelopment())
        {
            app.UseDeveloperExceptionPage();
        }
    
        // Shows UseCors with CorsPolicyBuilder.
        app.UseCors(builder =>
           builder.WithOrigins("http://example.com"));
    
        app.Run(async (context) =>
        {
            await context.Response.WriteAsync("Hello World!");
        });
    

    ラムダは、CorsPolicyBuilder オブジェクトをとります。The lambda takes a CorsPolicyBuilder object. 構成オプションなどWithOriginsはこのトピックの後半で説明します。Configuration options, such as WithOrigins, are described later in this topic. 上記の例では、ポリシーによりからのクロス オリジン要求https://example.comおよびその他のオリジンはありません。In the preceding example, the policy allows cross-origin requests from https://example.com and no other origins.

    末尾のスラッシュせず、URL を指定する必要があります (/)。The URL must be specified without a trailing slash (/). URL が終了した場合は/、比較を返しますfalseヘッダーは返されません。If the URL terminates with /, the comparison returns false and no header is returned.

    CorsPolicyBuilder メソッドの呼び出しをチェーンできるように、fluent API があります。CorsPolicyBuilder has a fluent API, so you can chain method calls:

    app.UseCors(builder =>
        builder.WithOrigins("http://example.com")
               .AllowAnyHeader()
        );
    
  • 1 つまたは複数の名前付き CORS ポリシーを定義し、実行時に名前で、ポリシーを選択します。Define one or more named CORS policies and select the policy by name at runtime. 次の例では、という名前のユーザー定義の CORS ポリシー AllowSpecificOriginします。The following example adds a user-defined CORS policy named AllowSpecificOrigin. ポリシーを選択する名前を渡すUseCors:To select the policy, pass the name to UseCors:

    public void ConfigureServices(IServiceCollection services)
    {
        services.AddCors(options =>
        {
            options.AddPolicy("AllowSpecificOrigin",
                builder => builder.WithOrigins("http://example.com"));
        });
    }
    
    public void Configure(IApplicationBuilder app, IHostingEnvironment env, 
        ILoggerFactory loggerFactory)
    {
        loggerFactory.AddConsole();
    
        if (env.IsDevelopment())
        {
            app.UseDeveloperExceptionPage();
        }
    
        // Shows UseCors with named policy.
        app.UseCors("AllowSpecificOrigin");
    
        app.Run(async (context) =>
        {
            await context.Response.WriteAsync("Hello World!");
        });
    }
    

MVC で CORS を有効にします。Enable CORS in MVC

MVC を使用して、アクションごとまたはコント ローラーごとに特定の CORS ポリシーを適用することもできます。You can alternatively use MVC to apply specific CORS policies per action or per controller. MVC を使用して、CORS を有効にする、登録されている CORS サービスが使用されます。When using MVC to enable CORS, the registered CORS services are used. CORS ミドルウェアは使用されません。The CORS Middleware isn't used.

アクションごとPer action

特定のアクションの CORS ポリシーを指定するには、追加、 [EnableCors] 属性をアクションにします。To specify a CORS policy for a specific action, add the [EnableCors] attribute to the action. ポリシー名を指定します。Specify the policy name.

[HttpGet]
[EnableCors("AllowSpecificOrigin")]
public IEnumerable<string> Get()
{
    return new string[] { "value1", "value2" };
}

コント ローラーごとPer controller

特定のコント ローラーの CORS ポリシーを指定するには、追加、 [EnableCors] 属性をコント ローラー クラス。To specify the CORS policy for a specific controller, add the [EnableCors] attribute to the controller class. ポリシー名を指定します。Specify the policy name.

[Route("api/[controller]")]
[EnableCors("AllowSpecificOrigin")]
public class ValuesController : ControllerBase

優先順位は次のとおりです。The precedence order is:

  1. アクションaction
  2. コントローラーcontroller

CORS を無効にします。Disable CORS

コント ローラーまたはアクションの CORS を無効にする、 [DisableCors] 属性。To disable CORS for a controller or action, use the [DisableCors] attribute:

[HttpGet("{id}")]
[DisableCors]
public string Get(int id)
{
    return "value";
}

CORS ポリシー オプションCORS policy options

このセクションでは、CORS ポリシーで設定できるさまざまなオプションについて説明します。This section describes the various options that you can set in a CORS policy. AddPolicyメソッドが呼び出されるStartup.ConfigureServicesします。The AddPolicy method is called in Startup.ConfigureServices.

いくつかのオプションの読み取りをすると役立つ場合があります、 CORS ではどのように動作最初のセクションします。For some options, it may be helpful to read the How CORS works section first.

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

ASP.NET Core MVC で CORS ミドルウェアでは、許可されるオリジンを指定するいくつかの方法があります。The CORS middleware in ASP.NET Core MVC has a few ways to specify allowed origins:

  • WithOrigins – 1 つまたは複数の Url を指定できます。WithOrigins – Allows specifying one or more URLs. URL には、スキーム、ホスト名、およびパス情報がないポートを含めることができます。The URL may include the scheme, host name, and port without any path information. たとえば、https://example.com のようにします。For example, https://example.com. 末尾のスラッシュせず、URL を指定する必要があります (/)。The URL must be specified without a trailing slash (/).

    options.AddPolicy("AllowSpecificOrigins",
        builder =>
        {
            builder.WithOrigins("http://example.com", 
                "http://www.contoso.com");
        });
    
  • AllowAnyOrigin – 任意のスキームですべてのオリジンからの CORS 要求を許可 (httpまたはhttps)。AllowAnyOrigin – Allows CORS requests from all origins with any scheme (http or https).

    options.AddPolicy("AllowAllOrigins",
        builder =>
        {
            builder.AllowAnyOrigin();
        });
    

    任意のオリジンからの要求を許可する前に慎重に検討してください。Consider carefully before allowing requests from any origin. 任意のオリジンからの要求を許可することを意味任意の web サイトアプリへのクロス オリジン要求を行うことができます。Allowing requests from any origin means that any website can make cross-origin requests to your app.

    注意

    指定するAllowAnyOriginAllowCredentials構成は安全でないと、クロスサイト リクエスト フォージェリで発生することができます。Specifying AllowAnyOrigin and AllowCredentials is an insecure configuration and can result in cross-site request forgery. CORS サービスは、アプリが両方の方法で構成されている場合、CORS の無効な応答を返します。The CORS service returns an invalid CORS response when an app is configured with both methods.

    注意

    指定するAllowAnyOriginAllowCredentials構成は安全でないと、クロスサイト リクエスト フォージェリで発生することができます。Specifying AllowAnyOrigin and AllowCredentials is an insecure configuration and can result in cross-site request forgery. クライアントを承認する必要があります自体と、サーバー リソースにアクセスする場合にオリジンの正確なリストを指定することを検討してください。Consider specifying an exact list of origins if the client must authorize itself to access server resources.

    この設定に影響を与えますプレフライト要求とAccess-Control-Allow-Originヘッダー。This setting affects preflight requests and the Access-Control-Allow-Origin header. 詳細については、次を参照してください。、プレフライト要求セクション。For more information, see the Preflight requests section.

  • SetIsOriginAllowedToAllowWildcardSubdomains – セット、IsOriginAllowed配信元が許可されている場合に評価するときに構成されているワイルドカード ドメインに一致するオリジンを許可する関数として、ポリシーのプロパティ。SetIsOriginAllowedToAllowWildcardSubdomains – Sets the IsOriginAllowed property of the policy to be a function that allows origins to match a configured wildcarded domain when evaluating if the origin is allowed.

    options.AddPolicy("AllowSubdomain",
        builder =>
        {
            builder.SetIsOriginAllowedToAllowWildcardSubdomains();
        });
    

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

すべての HTTP メソッドを許可するのには、呼び出すAllowAnyMethod:To allow all HTTP methods, call AllowAnyMethod:

options.AddPolicy("AllowAllMethods",
    builder =>
    {
        builder.WithOrigins("http://example.com")
               .AllowAnyMethod();
    });

この設定に影響を与えますプレフライト要求とAccess-Control-Allow-Methodsヘッダー。This setting affects preflight requests and the Access-Control-Allow-Methods header. 詳細については、次を参照してください。、プレフライト要求セクション。For more information, see the Preflight requests section.

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

CORS 要求で送信される特定のヘッダーを許可するという要求ヘッダーを作成する、呼び出すWithHeadersし、許可されたヘッダーを指定します。To allow specific headers to be sent in a CORS request, called author request headers, call WithHeaders and specify the allowed headers:

options.AddPolicy("AllowHeaders",
    builder =>
    {
        builder.WithOrigins("http://example.com")
               .WithHeaders(HeaderNames.ContentType, "x-custom-header");
    });

許可するのには、すべての著者要求ヘッダー、呼び出すAllowAnyHeader:To allow all author request headers, call AllowAnyHeader:

options.AddPolicy("AllowAllHeaders",
    builder =>
    {
        builder.WithOrigins("http://example.com")
               .AllowAnyHeader();
    });

この設定に影響を与えますプレフライト要求とAccess-Control-Request-Headersヘッダー。This setting affects preflight requests and the Access-Control-Request-Headers header. 詳細については、次を参照してください。、プレフライト要求セクション。For more information, see the Preflight requests section.

指定された特定のヘッダーに一致する CORS ミドルウェア ポリシーWithHeadersヘッダーが送信されるときにのみ可能なはAccess-Control-Request-Headersに記載されているヘッダーと正確に一致WithHeadersします。A CORS Middleware policy match to specific headers specified by WithHeaders is only possible when the headers sent in Access-Control-Request-Headers exactly match the headers stated in WithHeaders.

たとえば、次のように構成されているアプリを検討してください。For instance, consider an app configured as follows:

app.UseCors(policy => policy.WithHeaders(HeaderNames.CacheControl));

CORS ミドルウェアは、次の要求ヘッダーでプレフライト要求を拒否Content-Language(HeaderNames.ContentLanguage) の一覧にないWithHeaders:CORS Middleware declines a preflight request with the following request header because Content-Language (HeaderNames.ContentLanguage) isn't listed in WithHeaders:

Access-Control-Request-Headers: Cache-Control, Content-Language

アプリを返します、 200 ok をクリック応答が戻り、CORS ヘッダーを送信しません。The app returns a 200 OK response but doesn't send the CORS headers back. そのため、ブラウザーでは、クロス オリジン要求を試行しません。Therefore, the browser doesn't attempt the cross-origin request.

CORS ミドルウェアで 4 つのヘッダーを常に許可する、 Access-Control-Request-Headers CorsPolicy.Headers で構成されている値に関係なく送信します。CORS Middleware always allows four headers in the Access-Control-Request-Headers to be sent regardless of the values configured in CorsPolicy.Headers. このヘッダーの一覧は次のとおりです。This list of headers includes:

  • Accept
  • Accept-Language
  • Content-Language
  • Origin

たとえば、次のように構成されているアプリを検討してください。For instance, consider an app configured as follows:

app.UseCors(policy => policy.WithHeaders(HeaderNames.CacheControl));

CORS ミドルウェアは、次の要求ヘッダーでプレフライト要求に正常に応答ためContent-Languageは常にホワイト リストに登録します。CORS Middleware responds successfully to a preflight request with the following request header because Content-Language is always whitelisted:

Access-Control-Request-Headers: Cache-Control, Content-Language

公開されている応答ヘッダーを設定します。Set the exposed response headers

既定では、ブラウザーはすべてのアプリに応答ヘッダーで公開されません。By default, the browser doesn't expose all of the response headers to the app. 詳細については、次を参照してください。 W3C のクロス オリジン リソース共有 (用語集): 単純な応答ヘッダーします。For more information, see W3C Cross-Origin Resource Sharing (Terminology): Simple Response Header.

既定で使用できる応答ヘッダーは次のとおりです。The response headers that are available by default are:

  • Cache-Control
  • Content-Language
  • Content-Type
  • Expires
  • Last-Modified
  • Pragma

CORS の仕様は、これらのヘッダーを呼び出す単純な応答ヘッダーします。The CORS specification calls these headers simple response headers. で他のヘッダーをアプリに使用できるように呼び出すWithExposedHeaders:To make other headers available to the app, call WithExposedHeaders:

options.AddPolicy("ExposeResponseHeaders",
    builder =>
    {
        builder.WithOrigins("http://example.com")
               .WithExposedHeaders("x-custom-header");
    });

クロス オリジン要求で資格情報Credentials in cross-origin requests

資格情報では、CORS 要求で特別な処理が必要です。Credentials require special handling in a CORS request. 既定では、ブラウザーは、クロス オリジン要求に資格情報を送信しません。By default, the browser doesn't send credentials with a cross-origin request. Cookie および HTTP 認証方式は、資格情報が含まれます。Credentials include cookies and HTTP authentication schemes. クロス オリジン要求に資格情報を送信するクライアントを設定する必要がありますXMLHttpRequest.withCredentialstrueします。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', 'https://www.example.com/api/test');
xhr.withCredentials = true;

Jquery では。In jQuery:

$.ajax({
  type: 'get',
  url: 'https://www.example.com/home',
  xhrFields: {
    withCredentials: true
}

さらに、サーバーは、資格情報を許可する必要があります。In addition, the server must allow the credentials. クロス オリジンの資格情報を許可するのには、呼び出すAllowCredentials:To allow cross-origin credentials, call AllowCredentials:

options.AddPolicy("AllowCredentials",
    builder =>
    {
        builder.WithOrigins("http://example.com")
               .AllowCredentials();
    });

HTTP 応答が含まれる、Access-Control-Allow-Credentialsヘッダーで、サーバーでクロス オリジン要求の資格情報は、ブラウザーに指示します。The HTTP response includes an Access-Control-Allow-Credentials header, which tells the browser that the server allows credentials for a cross-origin request.

ブラウザーが資格情報を送信しますが、有効な応答を含まないAccess-Control-Allow-Credentialsヘッダー、ブラウザーは、アプリへの応答を公開しないし、クロス オリジン要求は失敗します。If the browser sends credentials but the response doesn't include a valid Access-Control-Allow-Credentials header, the browser doesn't expose the response to the app, and the cross-origin request fails.

クロス オリジンの資格情報を許可する際に注意します。Be careful when allowing cross-origin credentials. 別のドメインに web サイトでは、ユーザーの知識がなくても、ユーザーの代わりに、アプリにサインイン済みのユーザーの資格情報を送信できます。A website at another domain can send a signed-in user's credentials to the app on the user's behalf without the user's knowledge.

CORS の仕様もその設定を示すオリジンを"*"(すべてのオリジン) 有効でない場合、Access-Control-Allow-Credentialsヘッダーが存在します。The CORS specification also states that setting origins to "*" (all origins) is invalid if the Access-Control-Allow-Credentials header is present.

プレフライト要求Preflight requests

一部の CORS 要求では、ブラウザーは、実際の要求を行う前に、追加の要求を送信します。For some CORS requests, the browser sends an additional request before making the actual request. この要求と呼ばれる、プレフライト要求します。This request is called a preflight request. 次の条件に該当する場合、ブラウザーでプレフライト要求をスキップできます。The browser can skip the preflight request if the following conditions are true:

  • 要求メソッドは、GET、HEAD、または POST です。The request method is GET, HEAD, or POST.
  • アプリが要求ヘッダー以外に設定されていないAcceptAccept-LanguageContent-LanguageContent-Type、またはLast-Event-IDします。The app doesn't set request headers other than Accept, Accept-Language, Content-Language, Content-Type, or Last-Event-ID.
  • Content-Typeヘッダー場合、次の値のいずれか。The Content-Type header, if set, has one of the following values:
    • application/x-www-form-urlencoded
    • multipart/form-data
    • text/plain

要求ヘッダーでルール セットのクライアント要求を呼び出すことによって、アプリを設定するヘッダーに適用のsetRequestHeader上、XMLHttpRequestオブジェクト。The rule on request headers set for the client request applies to headers that the app sets by calling setRequestHeader on the XMLHttpRequest object. CORS の仕様は、これらのヘッダーを呼び出す要求ヘッダーを作成するします。The CORS specification calls these headers author request headers. ヘッダーは、ブラウザー設定できるように、ルールは適用されませんUser-AgentHost、またはContent-Lengthします。The rule doesn't apply to headers the browser can set, such as User-Agent, Host, or Content-Length.

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

OPTIONS https://myservice.azurewebsites.net/api/test HTTP/1.1
Accept: */*
Origin: https://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:

  • Access-Control-Request-Method: 実際の要求に使用される HTTP メソッド。Access-Control-Request-Method: The HTTP method that will be used for the actual request.
  • Access-Control-Request-Headers: アプリが、実際の要求で設定できる要求ヘッダーの一覧。Access-Control-Request-Headers: A list of request headers that the app sets on the actual request. 前述のように、ブラウザー設定などのヘッダーは含まれませんUser-Agentします。As stated earlier, this doesn't include headers that the browser sets, such as User-Agent.

CORS プレフライト要求を含めることができます、Access-Control-Request-Headersヘッダーで、サーバーの実際の要求で送信されるヘッダーを示します。A CORS preflight request might include an Access-Control-Request-Headers header, which indicates to the server the headers that are sent with the actual request.

特定のヘッダーを許可するのには、呼び出すWithHeaders:To allow specific headers, call WithHeaders:

options.AddPolicy("AllowHeaders",
    builder =>
    {
        builder.WithOrigins("http://example.com")
               .WithHeaders(HeaderNames.ContentType, "x-custom-header");
    });

許可するのには、すべての著者要求ヘッダー、呼び出すAllowAnyHeader:To allow all author request headers, call AllowAnyHeader:

options.AddPolicy("AllowAllHeaders",
    builder =>
    {
        builder.WithOrigins("http://example.com")
               .AllowAnyHeader();
    });

ブラウザーはどのように設定でまったく一貫性のあるAccess-Control-Request-Headersします。Browsers aren't entirely consistent in how they set Access-Control-Request-Headers. 以外に何もヘッダーを設定する場合"*"(を使用して、またはAllowAnyHeader)、以上含める必要があるAcceptContent-Type、およびOrigin、さらにサポートするカスタム ヘッダー。If you set headers to anything other than "*" (or use AllowAnyHeader), you should include at least Accept, Content-Type, and Origin, plus any custom headers that you want to support.

(サーバーが要求を許可することを想定) プレフライト要求に応答の例を次に示します。The following is an example response to the preflight request (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: https://myclient.azurewebsites.net
Access-Control-Allow-Headers: x-my-custom-header
Access-Control-Allow-Methods: PUT
Date: Wed, 20 May 2015 06:33:22 GMT

応答が含まれています、Access-Control-Allow-Methodsヘッダーを許可されるメソッドを一覧表示して、必要に応じて、Access-Control-Allow-Headersヘッダーで、許可されたヘッダーを一覧表示されます。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.

アプリが返したプレフライト要求が拒否された場合、 200 OK応答戻る、CORS ヘッダーを送信しないが。If the preflight request is denied, the app returns a 200 OK response but doesn't send the CORS headers back. そのため、ブラウザーでは、クロス オリジン要求を試行しません。Therefore, the browser doesn't attempt the cross-origin request.

プレフライトの有効期限を設定します。Set the preflight expiration time

Access-Control-Max-Ageヘッダーは、プレフライト要求に応答をキャッシュできる期間を指定します。The Access-Control-Max-Age header specifies how long the response to the preflight request can be cached. このヘッダーを設定するには、呼び出すSetPreflightMaxAge:To set this header, call SetPreflightMaxAge:

options.AddPolicy("SetPreflightExpiration",
    builder =>
    {
        builder.WithOrigins("http://example.com")
               .SetPreflightMaxAge(TimeSpan.FromSeconds(2520));
    });

CORS のしくみHow CORS works

このセクションでは、HTTP メッセージのレベルでの CORS 要求での動作について説明します。This section describes what happens in a CORS request at the level of the HTTP messages. CORS ポリシーを正しく構成されているし、予期しない動作が発生したときにデバッグできるようにの CORS のしくみを理解しておく必要があります。It's important to understand how CORS works so that the CORS policy can be configured correctly and debugged when unexpected behaviors occur.

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

次は、クロス オリジン要求の例です。The following is an example of a cross-origin request. Originヘッダーは要求を行っているサイトのドメインを提供します。The Origin header provides the domain of the site that's making the request:

GET https://myservice.azurewebsites.net/api/test HTTP/1.1
Referer: https://myclient.azurewebsites.net/
Accept: */*
Accept-Language: en-US
Origin: https://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

設定されているサーバーでは、要求を許可している場合、Access-Control-Allow-Origin応答のヘッダー。If the server allows the request, it sets the Access-Control-Allow-Origin header in the response. このヘッダーの値と一致するか、Origin要求からヘッダーまたはワイルドカード値"*"、任意のオリジンを許可することを意味します。The value of this header either matches the Origin header from the request 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: https://myclient.azurewebsites.net
Date: Wed, 20 May 2015 06:27:30 GMT
Content-Length: 12

Test message

応答に含まれていない場合、Access-Control-Allow-Originヘッダー、クロス オリジン要求は失敗します。If the response doesn't include the Access-Control-Allow-Origin header, the cross-origin request fails. 具体的には、ブラウザーには、要求が許可されていません。Specifically, the browser disallows the request. サーバーに正常な応答が返される場合でも、ブラウザーは、応答を使用できるようにクライアント アプリ。Even if the server returns a successful response, the browser doesn't make the response available to the client app.

その他の技術情報Additional resources