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

作成者: Rick AndersonBy Rick Anderson

この記事では、ASP.NET Core アプリで CORS を有効にする方法を示します。This article shows how to enable CORS in an ASP.NET Core app.

ブラウザーのセキュリティは、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. 詳細については、Mozilla CORS の記事 を参照してください。For more information, see the Mozilla CORS article.

クロス オリジン リソース共有(CORS)。Cross Origin Resource Sharing (CORS):

  • W3C による同一オリジン ポリシーの緩和するようにサーバーを利用できる標準。Is a W3C standard that allows a server to relax the same-origin policy.
  • CORS はセキュリティ機能では なく、セキュリティを緩和するものです。Is not a security feature, CORS relaxes security. CORS を許可しても、API は安全ではありません。An API is not safer by allowing CORS. 詳細については、 CORS の仕組み を参照してください。For more information, see How CORS works.
  • 他のユーザーを拒否しながら、いくつかのクロス オリジン要求を明示的に許可するサーバーを使用できます。Allows a server to explicitly allow some cross-origin requests while rejecting others.
  • 安全性と以前の手法よりも柔軟性はなど、 JSONPします。Is safer and more flexible than earlier techniques, such as JSONP.

サンプル コードを表示またはダウンロードします (ダウンロード方法)。View or download sample code (how to download)

同じ生成元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.

名前付きポリシーとミドルウェアで CORSCORS with named policy and middleware

CORS ミドルウェアは、クロス オリジン要求を処理します。CORS Middleware handles cross-origin requests. 次のコードでは、指定された配信元とアプリ全体に対して CORS を有効にします。The following code enables CORS for the entire app with the specified origin:

public class Startup
{
    public Startup(IConfiguration configuration)
    {
        Configuration = configuration;
    }

    readonly string MyAllowSpecificOrigins = "_myAllowSpecificOrigins";

    public IConfiguration Configuration { get; }

    public void ConfigureServices(IServiceCollection services)
    {
        services.AddCors(options =>
        {
            options.AddPolicy(MyAllowSpecificOrigins,
            builder =>
            {
                builder.WithOrigins("http://example.com",
                                    "http://www.contoso.com");
            });
        });

        services.AddMvc().SetCompatibilityVersion(CompatibilityVersion.Version_2_2);
    }

    public void Configure(IApplicationBuilder app, IHostingEnvironment env)
    {
        if (env.IsDevelopment())
        {
            app.UseDeveloperExceptionPage();
        }
        else
        {
            app.UseHsts();
        }

        app.UseCors(MyAllowSpecificOrigins); 

        app.UseHttpsRedirection();
        app.UseMvc();
    }
}

上のコードでは以下の操作が行われます。The preceding code:

  • ポリシー名を設定"_myAllowSpecificOrigins"。Sets the policy name to "_myAllowSpecificOrigins". ポリシーの名前は任意です。The policy name is arbitrary.
  • 呼び出し、UseCors拡張メソッドは、CORS を使用します。Calls the UseCors extension method, which enables CORS.
  • 呼び出しAddCorsで、ラムダ式します。Calls AddCors with a lambda expression. ラムダは、CorsPolicyBuilder オブジェクトをとります。The lambda takes a CorsPolicyBuilder object. 構成オプションなどWithOriginsはこの記事の後半で説明します。Configuration options, such as WithOrigins, are described later in this article.

AddCorsメソッドの呼び出しは、アプリのサービス コンテナーにサービスの CORS を追加します。The AddCors method call adds CORS services to the app's service container:

public void ConfigureServices(IServiceCollection services)
{
    services.AddCors(options =>
    {
        options.AddPolicy(MyAllowSpecificOrigins,
        builder =>
        {
            builder.WithOrigins("http://example.com",
                                "http://www.contoso.com");
        });
    });

    services.AddMvc().SetCompatibilityVersion(CompatibilityVersion.Version_2_2);
}

詳細については、次を参照してください。 CORS ポリシー オプションこのドキュメントで。For more information, see CORS policy options in this document .

CorsPolicyBuilderメソッドは次のコードに示すように、メソッドを連結できます。The CorsPolicyBuilder method can chain methods, as shown in the following code:

public void ConfigureServices(IServiceCollection services)
{
    services.AddCors(options =>
    {
        options.AddPolicy(MyAllowSpecificOrigins,
        builder =>
        {
            builder.WithOrigins("http://example.com",
                                "http://www.contoso.com")
                                .AllowAnyHeader()
                                .AllowAnyMethod();
        });
    });

    services.AddMvc().SetCompatibilityVersion(CompatibilityVersion.Version_2_2);
}

次の強調表示されたコードでは、CORS ミドルウェアを使用してすべてのアプリのエンドポイントに CORS ポリシーを適用します。The following highlighted code applies CORS policies to all the apps endpoints via CORS Middleware:

public void Configure(IApplicationBuilder app, IHostingEnvironment env)
{
    if (env.IsDevelopment())
    {
        app.UseDeveloperExceptionPage();
    }
    else
    {
        app.UseHsts();
    }

    app.UseCors();

    app.UseHttpsRedirection();
    app.UseMvc();
}

参照してくださいRazor ページ、コントローラ、およびアクション メソッドで CORS を有効にするアクション/ページ/コント ローラー レベルでの CORS ポリシーを適用します。See Enable CORS in Razor Pages, controllers, and action methods to apply CORS policy at the page/controller/action level.

メモ:Note:

  • UseCors 前に呼び出す必要がありますUseMvcします。UseCors must be called before UseMvc.
  • URL にする必要がありますいない末尾のスラッシュを含める (/)。The URL must not contain a trailing slash (/). URL が終了した場合は/、比較を返しますfalseヘッダーは返されません。If the URL terminates with /, the comparison returns false and no header is returned.

参照してくださいテスト CORSについては、上記のコードをテストします。See Test CORS for instructions on testing the preceding code.

属性を持つ CORS を有効にします。Enable CORS with attributes

[EnableCors] 属性は、CORS をグローバルに適用する代替を提供します。The [EnableCors] attribute provides an alternative to applying CORS globally. [EnableCors]属性は、すべてのエンドポイントではなく、選択した最後の点で CORS を使用します。The [EnableCors] attribute enables CORS for selected end points, rather than all end points.

使用[EnableCors]既定のポリシーを指定して[EnableCors("{Policy String}")]ポリシーを指定します。Use [EnableCors] to specify the default policy and [EnableCors("{Policy String}")] to specify a policy.

[EnableCors]に属性を適用できます。The [EnableCors] attribute can be applied to:

  • Razor ページ PageModelRazor Page PageModel
  • コントローラーController
  • コント ローラー アクション メソッドController action method

コント ローラー/ページ-モデル/アクションとするさまざまなポリシーを適用することができます、[EnableCors]属性。You can apply different policies to controller/page-model/action with the [EnableCors] attribute. ときに、[EnableCors]属性をコント ローラー/ページ-モデル/アクション メソッドに適用されます、ミドルウェアで CORS が有効になっていると、両方のポリシーが適用されます。When the [EnableCors] attribute is applied to a controllers/page-model/action method, and CORS is enabled in middleware, both policies are applied. ポリシーを組み合わせることをお勧めします。We recommend against combining policies. 使用して、[EnableCors]属性または両方で同じアプリでは、ミドルウェア。Use the [EnableCors] attribute or middleware, not both in the same app.

次のコードでは、各メソッドに別のポリシーが適用されます。The following code applies a different policy to each method:

[Route("api/[controller]")]
[ApiController]
public class WidgetController : ControllerBase
{
    // GET api/values
    [EnableCors("AnotherPolicy")]
    [HttpGet]
    public ActionResult<IEnumerable<string>> Get()
    {
        return new string[] { "green widget", "red widget" };
    }

    // GET api/values/5
    [EnableCors]        // Default policy.
    [HttpGet("{id}")]
    public ActionResult<string> Get(int id)
    {
        switch (id)
        {
            case 1:
                return "green widget";
            case 2:
                return "red widget";
            default:
                return NotFound();
        }
    }
}

次のコードは、CORS の既定のポリシーとという名前のポリシーを作成します"AnotherPolicy":。The following code creates a CORS default policy and a policy named "AnotherPolicy":

public class StartupMultiPolicy
{
    public StartupMultiPolicy(IConfiguration configuration)
    {
        Configuration = configuration;
    }

    public IConfiguration Configuration { get; }

    public void ConfigureServices(IServiceCollection services)
    {
        services.AddCors(options =>
        {
            options.AddDefaultPolicy(
                builder =>
                {
                   
                    builder.WithOrigins("http://example.com",
                                        "http://www.contoso.com");
                });

            options.AddPolicy("AnotherPolicy",
                builder =>
                {
                    builder.WithOrigins("http://www.contoso.com")
                                        .AllowAnyHeader()
                                        .AllowAnyMethod();
                });

        });

        services.AddMvc().SetCompatibilityVersion(CompatibilityVersion.Version_2_2);
    }

    public void Configure(IApplicationBuilder app, IHostingEnvironment env)
    {
        if (env.IsDevelopment())
        {
            app.UseDeveloperExceptionPage();
        }
        else
        {
            app.UseHsts();
        }

        app.UseHttpsRedirection();
        app.UseMvc();
    }
}

CORS を無効にします。Disable CORS

[DisableCors] 属性は、コント ローラー/ページ-モデル/アクションに対して CORS を無効になります。The [DisableCors] attribute disables CORS for the controller/page-model/action.

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

このセクションでは、CORS ポリシーで設定できるさまざまなオプションについて説明します。This section describes the various options that can be set in a CORS policy:

AddPolicy 呼び出されるStartup.ConfigureServicesします。AddPolicy 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

AllowAnyOrigin – 任意のスキームですべてのオリジンからの CORS 要求を許可 (httpまたはhttps)。AllowAnyOrigin – Allows CORS requests from all origins with any scheme (http or https). AllowAnyOrigin 安全でないため、任意の web サイトをアプリにクロスオリジン要求を行うことができます。AllowAnyOrigin is insecure because any website can make cross-origin requests to the 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. セキュリティで保護されたアプリでは、クライアントを承認する必要があります自体と、サーバー リソースにアクセスする場合のオリジンの正確なリストを指定します。For a secure app, specify an exact list of origins if the client must authorize itself to access server resources.

AllowAnyOrigin プリフライト要求の影響とAccess-Control-Allow-Originヘッダー。AllowAnyOrigin 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 wildcard domain when evaluating if the origin is allowed.

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

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

AllowAnyMethod:AllowAnyMethod:

  • 任意の HTTP メソッドを使用できます。Allows any HTTP method:
  • プリフライト要求の影響とAccess-Control-Allow-Methodsヘッダー。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 を使用します。Using jQuery:

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

使用して、 API フェッチ:Using the Fetch API:

fetch('https://www.example.com/api/test', {
    credentials: 'include'
});

サーバーは、資格情報を許可する必要があります。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.

クロス オリジンの資格情報がセキュリティ上のリスクです。Allowing cross-origin credentials is a security risk. 別のドメインに 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

このセクションでの動作について説明します、 CORS HTTP メッセージのレベルで要求します。This section describes what happens in a CORS request at the level of the HTTP messages.

  • CORS はいないセキュリティ機能。CORS is not a security feature. CORS は、サーバーによる同一オリジン ポリシーの緩和にできる W3C 標準です。CORS is a W3C standard that allows a server to relax the same-origin policy.
  • CORS を許可することで、API をより安全なすることはできません。Your API is not safer by allowing CORS.
    • クライアント (ブラウザー) に CORS を適用します。It's up to the client (browser) to enforce CORS. サーバーが要求を実行し、応答を返します、それがクライアントでエラーとブロックの応答を返します。The server executes the request and returns the response, it's the client that returns an error and blocks the response. たとえば、次のツールのいずれかのサーバーの応答が表示されます。For example, any of the following tools will display the server response:
  • クロス オリジンを実行するには、サーバーがブラウザーを許可する方法はXHRまたはフェッチ APIそれ以外の場合、禁止されるよう要求します。It's a way for a server to allow browsers to execute a cross-origin XHR or Fetch API request that otherwise would be forbidden.
    • (CORS) なしのブラウザーでは、クロス オリジン要求を実行できません。Browsers (without CORS) can't do cross-origin requests. CORS をする前にJSONPこの制限を回避するために使用されました。Before CORS, JSONP was used to circumvent this restriction. JSONP は、XHR を使用していないを使用して、<script>応答を受信するタグ。JSONP doesn't use XHR, it uses the <script> tag to receive the response. スクリプトが読み込まれたクロス オリジンが許可されます。Scripts are allowed to be loaded cross-origin.

CORS の仕様のクロス オリジン要求を有効にするいくつかの新しい HTTP ヘッダーが導入されました。The CORS specification introduced 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.

CORS をテストします。Test CORS

CORS をテストします。To test CORS:

  1. API プロジェクトを作成です。Create an API project. または、サンプルをダウンロードします。Alternatively, you can download the sample.
  2. このドキュメントで、アプローチの 1 つを使用して、CORS を有効にします。Enable CORS using one of the approaches in this document. 例:For example:
public void Configure(IApplicationBuilder app, IHostingEnvironment env)
{
    if (env.IsDevelopment())
    {
        app.UseDeveloperExceptionPage();
    }
    else
    {
        app.UseHsts();
    }

    // Shows UseCors with CorsPolicyBuilder.
    app.UseCors(builder =>
    {
        builder.WithOrigins("http://example.com",
                            "http://www.contoso.com",
                            "https://localhost:44375",
                            "https://localhost:5001");
    });

    app.UseHttpsRedirection();
    app.UseMvc();
}

警告

WithOrigins("https://localhost:<port>"); ようなサンプル アプリをテストするためにのみ使用する必要があります、サンプル コードをダウンロードします。WithOrigins("https://localhost:<port>"); should only be used for testing a sample app similar to the download sample code.

  1. (Razor ページまたは MVC) web アプリ プロジェクトを作成します。Create a web app project (Razor Pages or MVC). このサンプルでは、Razor ページを使用します。The sample uses Razor Pages. API プロジェクトと同じソリューションでは、web アプリを作成することができます。You can create the web app in the same solution as the API project.
  2. 次の強調表示されたコードを追加、 Index.cshtmlファイル。Add the following highlighted code to the Index.cshtml file:
@page
@model IndexModel
@{
    ViewData["Title"] = "Home page";
}

<div class="text-center">
    <h1 class="display-4">CORS Test</h1>
</div>

<div>
    <input type="button" value="Test" 
           onclick="requestVal('https://<web app>.azurewebsites.net/api/values')" />
    <span id='result'></span>
</div>

<script>
    function requestVal(uri) {
        const resultSpan = document.getElementById('result');

        fetch(uri)
            .then(response => response.json())
            .then(data => resultSpan.innerText = data)
            .catch(error => resultSpan.innerText = 'See F12 Console for error');
    }
</script>
  1. 上記のコードで置き換えますurl: 'https://<web app>.azurewebsites.net/api/values/1',でデプロイされたアプリの URL。In the preceding code, replace url: 'https://<web app>.azurewebsites.net/api/values/1', with the URL to the deployed app.

  2. API プロジェクトをデプロイします。Deploy the API project. たとえば、を Azure にデプロイします。For example, deploy to Azure.

  3. デスクトップから、Razor ページまたは MVC アプリを実行し、をクリックして、テストボタンをクリックします。Run the Razor Pages or MVC app from the desktop and click on the Test button. F12 ツールを使用して、エラー メッセージを確認します。Use the F12 tools to review error messages.

  4. Localhost 原点からの削除WithOriginsと、アプリをデプロイします。Remove the localhost origin from WithOrigins and deploy the app. または、別のポートでクライアント アプリを実行します。Alternatively, run the client app with a different port. たとえば、Visual Studio から実行します。For example, run from Visual Studio.

  5. クライアント アプリをテストします。Test with the client app. CORS の障害には、エラーが返されますが、エラー メッセージは JavaScript を使用できません。CORS failures return an error, but the error message isn't available to JavaScript. F12 ツールで、[コンソール] タブを使用して、エラーを参照してください。Use the console tab in the F12 tools to see the error. ブラウザーによっては、次のような (F12 ツールのコンソール) で、エラーが発生します。Depending on the browser, you get an error (in the F12 tools console) similar to the following:

    • Microsoft Edge の使用。Using Microsoft Edge:

      SEC7120: [CORS]、配信元https://localhost:44375が見つかりませんでしたhttps://localhost:44375でクロス オリジン リソースへのアクセス制御の許可-オリジン応答ヘッダー https://webapi.azurewebsites.net/api/values/1SEC7120: [CORS] The origin https://localhost:44375 did not find https://localhost:44375 in the Access-Control-Allow-Origin response header for cross-origin resource at https://webapi.azurewebsites.net/api/values/1

    • Chrome を使用します。Using Chrome:

      XMLHttpRequest へのアクセスhttps://webapi.azurewebsites.net/api/values/1配信元からhttps://localhost:44375CORS ポリシーによってブロックされています。'へのアクセス制御の許可-オリジン' ヘッダーが要求されたリソースに存在しません。Access to XMLHttpRequest at https://webapi.azurewebsites.net/api/values/1 from origin https://localhost:44375 has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

その他の技術情報Additional resources