ASP.NET core'da çıkış noktaları arası istekleri (CORS) etkinleştirmeEnable Cross-Origin Requests (CORS) in ASP.NET Core

Tarafından Rick AndersonBy Rick Anderson

Bu makalede, bir ASP.NET Core uygulamada CORS'yi etkinleştirme gösterilmektedir.This article shows how to enable CORS in an ASP.NET Core app.

Tarayıcı güvenlik, bir web sayfası web sayfada sunulandan daha farklı bir etki alanı istekleri yapmasını engeller.Browser security prevents a web page from making requests to a different domain than the one that served the web page. Bu kısıtlama adlı aynı çıkış noktası İlkesi.This restriction is called the same-origin policy. Aynı kaynak İlkesi, kötü niyetli site başka bir siteden hassas verileri okumasını önler.The same-origin policy prevents a malicious site from reading sensitive data from another site. Bazı durumlarda, uygulamanız için diğer sitelere çıkış noktaları arası isteklerde izin vermek isteyebilirsiniz.Sometimes, you might want to allow other sites make cross-origin requests to your app. Daha fazla bilgi için Mozilla CORS makale.For more information, see the Mozilla CORS article.

Çıkış noktaları arası kaynak paylaşımı (CORS):Cross Origin Resource Sharing (CORS):

  • Gevşek bir aynı çıkış noktası İlkesi bir sunucu izin veren bir W3C standarttır.Is a W3C standard that allows a server to relax the same-origin policy.
  • Olan değil CORS bir güvenlik özelliği güvenlik rahatlatır;.Is not a security feature, CORS relaxes security. API CORS tanıyarak güvenli değilAn API is not safer by allowing CORS. Daha fazla bilgi için CORS nasıl çalıştığını.For more information, see How CORS works.
  • Açıkça bazı çıkış noktaları arası istekleri izin verirken diğerlerini sunucuya sağlar.Allows a server to explicitly allow some cross-origin requests while rejecting others.
  • Güvenli ve önceki teknikleri, daha esnek olduğu gibi JSONP.Is safer and more flexible than earlier techniques, such as JSONP.

Görüntüleme veya indirme örnek kodu (nasıl indirileceğini)View or download sample code (how to download)

Aynı kaynakSame origin

İki URL aynı düzenleri, konaklar ve bağlantı noktaları varsa aynı kaynağa sahip (RFC 6454).Two URLs have the same origin if they have identical schemes, hosts, and ports (RFC 6454).

Bu iki URL aynı kaynağa sahip:These two URLs have the same origin:

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

Bu URL'ler, önceki iki URL değerinden farklı çıkış noktaları vardır:These URLs have different origins than the previous two URLs:

  • https://example.net – Farklı bir etki alanıhttps://example.net – Different domain
  • https://www.example.com/foo.html – Farklı alt etki alanıhttps://www.example.com/foo.html – Different subdomain
  • http://example.com/foo.html – Farklı düzenihttp://example.com/foo.html – Different scheme
  • https://example.com:9000/foo.html – Farklı bir bağlantı noktasıhttps://example.com:9000/foo.html – Different port

Internet Explorer kaynakları karşılaştırılırken, bağlantı noktası dikkate almaz.Internet Explorer doesn't consider the port when comparing origins.

CORS adlandırılmış ilke ve ara yazılımCORS with named policy and middleware

CORS Ara çıkış noktaları arası istekleri işler.CORS Middleware handles cross-origin requests. Aşağıdaki kod, uygulamanın tamamında ile belirtilen kaynak için CORS sağlar: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();
    }
}

Yukarıdaki kod:The preceding code:

AddCors Yöntem çağrısının CORS Hizmetleri uygulamanın hizmet kapsayıcıya ekler: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);
}

Daha fazla bilgi için CORS ilkesi seçenekleri bu belgedeki.For more information, see CORS policy options in this document .

CorsPolicyBuilder Yöntemi aşağıdaki kodda gösterildiği gibi yöntemleri, zincir: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);
}

Aşağıdaki vurgulanmış kodu CORS ara yazılımı üzerinden tüm uygulamaları uç noktalar için CORS ilkelerini uygular: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();
}

Bkz: Razor sayfaları, denetleyiciler ve eylem yöntemlerine CORS'yi etkinleştirme CORS ilkesini denetleyicisi/sayfa/eylemi düzeyinde uygulamak için.See Enable CORS in Razor Pages, controllers, and action methods to apply CORS policy at the page/controller/action level.

Not:Note:

  • UseCors önce çağrılmalıdır UseMvc.UseCors must be called before UseMvc.
  • URL gerekir değil sonunda eğik çizgi içermelidir (/).The URL must not contain a trailing slash (/). URL ile sona ererse /, karşılaştırma döndürür false ve üst bilgi döndürülür.If the URL terminates with /, the comparison returns false and no header is returned.

Bkz: Test CORS yönergeler için yukarıdaki kod test etme.See Test CORS for instructions on testing the preceding code.

Özniteliklerle CORS'yi etkinleştirmeEnable CORS with attributes

[EnableCors] öznitelik CORS genel uygulama için bir alternatif sağlar.The [EnableCors] attribute provides an alternative to applying CORS globally. [EnableCors] Özniteliği, tüm uç noktaları yerine seçili uç noktaları için CORS sağlar.The [EnableCors] attribute enables CORS for selected end points, rather than all end points.

Kullanım [EnableCors] varsayılan ilkesi belirlemek ve [EnableCors("{Policy String}")] ilke belirtmek için.Use [EnableCors] to specify the default policy and [EnableCors("{Policy String}")] to specify a policy.

[EnableCors] Özniteliği uygulanabilir:The [EnableCors] attribute can be applied to:

  • Razor sayfası PageModelRazor Page PageModel
  • DenetleyiciController
  • Denetleyici eylem yöntemiController action method

Denetleyici/sayfası-model/eylem ile farklı ilkeler uygulayabilirsiniz [EnableCors] özniteliği.You can apply different policies to controller/page-model/action with the [EnableCors] attribute. Zaman [EnableCors] özniteliği denetleyicileri/sayfası-model/eylem yöntemine uygulanan ve CORS Ara yazılımında etkin, her iki ilke uygulanır.When the [EnableCors] attribute is applied to a controllers/page-model/action method, and CORS is enabled in middleware, both policies are applied. İlkeleri birleştirme karşı öneririz.We recommend against combining policies. Kullanım [EnableCors] özniteliği veya her ikisini birden aynı uygulama ara yazılım.Use the [EnableCors] attribute or middleware, not both in the same app.

Aşağıdaki kod, farklı bir ilke her yönteme uygulanır: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();
        }
    }
}

Aşağıdaki kod bir CORS varsayılan ilkesi ve adlı bir ilke oluşturur "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 devre dışı bırakDisable CORS

[DisableCors] özniteliği devre dışı bırakır CORS denetleyicisi/sayfası-model/için eylem.The [DisableCors] attribute disables CORS for the controller/page-model/action.

CORS ilkesi seçenekleriCORS policy options

Bu bölümde, CORS ilke ayarlanabilir çeşitli seçenekler açıklanmaktadır:This section describes the various options that can be set in a CORS policy:

AddPolicy çağrılma yeri Startup.ConfigureServices.AddPolicy is called in Startup.ConfigureServices. Bazı seçenekleri okumak yardımcı olabilecek CORS nasıl çalıştığını ilk bölümü.For some options, it may be helpful to read the How CORS works section first.

İzin verilen çıkış noktaları ayarlamaSet the allowed origins

AllowAnyOrigin – CORS istekleri herhangi şeması ile tüm kaynaklara izin verir (http veya https).AllowAnyOrigin – Allows CORS requests from all origins with any scheme (http or https). AllowAnyOrigin güvenli değil çünkü herhangi bir Web sitesinde çıkış noktaları arası istekleri için uygulama yapabilir.AllowAnyOrigin is insecure because any website can make cross-origin requests to the app.

Not

Belirtme AllowAnyOrigin ve AllowCredentials güvensiz bir yapılandırmadır ve siteler arası istek sahteciliğini neden olabilir.Specifying AllowAnyOrigin and AllowCredentials is an insecure configuration and can result in cross-site request forgery. Bir uygulamanın her iki yöntemde de yapılandırıldığında CORS hizmeti geçersiz bir CORS yanıt döndürür.The CORS service returns an invalid CORS response when an app is configured with both methods.

Not

Belirtme AllowAnyOrigin ve AllowCredentials güvensiz bir yapılandırmadır ve siteler arası istek sahteciliğini neden olabilir.Specifying AllowAnyOrigin and AllowCredentials is an insecure configuration and can result in cross-site request forgery. İstemci sunucu kaynaklarına erişmek için yetkilendirmeniz gerekiyorsa güvenli bir uygulama için başlangıç noktaları tam bir listesini belirtin.For a secure app, specify an exact list of origins if the client must authorize itself to access server resources.

AllowAnyOrigin etkiler ön kontrol istekleri ve Access-Control-Allow-Origin başlığı.AllowAnyOrigin affects preflight requests and the Access-Control-Allow-Origin header. Daha fazla bilgi için öncesi istekleri bölümü.For more information, see the Preflight requests section.

SetIsOriginAllowedToAllowWildcardSubdomains – Kümeleri IsOriginAllowed yapılandırılmış joker karakter etki alanı kaynağını izin verilip verilmediğini değerlendirirken eşleşecek şekilde kaynakları sağlayan bir işlevi ilkesinin özelliği.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();
    });

İzin verilen HTTP yöntemleri AyarlaSet the allowed HTTP methods

AllowAnyMethod:AllowAnyMethod:

  • Herhangi bir HTTP yöntemini sağlar:Allows any HTTP method:
  • Etkiler ön kontrol istekleri ve Access-Control-Allow-Methods başlığı.Affects preflight requests and the Access-Control-Allow-Methods header. Daha fazla bilgi için öncesi istekleri bölümü.For more information, see the Preflight requests section.

İzin verilen istek üstbilgilerini AyarlaSet the allowed request headers

Adlı bir CORS isteğinde gönderilecek belirli üstbilgilere izin için yazar, istek üst bilgilerini, çağrı WithHeaders ve izin verilen üstbilgileri belirtin: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");
    });

Tüm istek üstbilgilerini Yazar izin vermek için çağrı AllowAnyHeader:To allow all author request headers, call AllowAnyHeader:

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

Bu ayar Denetim öncesi isteği etkiler ve Access-Control-Request-Headers başlığı.This setting affects preflight requests and the Access-Control-Request-Headers header. Daha fazla bilgi için öncesi istekleri bölümü.For more information, see the Preflight requests section.

CORS ara yazılımı ilke eşleşmesi için belirli üst bilgileri tarafından belirtilen WithHeaders gönderilen üst bilgiler, yalnızca mümkündür Access-Control-Request-Headers belirtilen üst bilgilerin tam olarak eşleşmesi 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.

Örneğin, şu şekilde yapılandırılmış bir uygulama göz önünde bulundurun:For instance, consider an app configured as follows:

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

CORS ara yazılımı, çünkü bir denetim öncesi isteği şu istek üst bilgisi ile azalma Content-Language (HeaderNames.ContentLanguage) içinde listelenmiyor 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

Uygulama döndürür bir 200 Tamam yanıt geri CORS üst bilgileri göndermez ancak.The app returns a 200 OK response but doesn't send the CORS headers back. Bu nedenle, tarayıcının çıkış noktaları arası istek çalışmaz.Therefore, the browser doesn't attempt the cross-origin request.

CORS ara yazılımı, her zaman dört üst bilgilerinde sağlar Access-Control-Request-Headers CorsPolicy.Headers içinde yapılandırılan değerlere bakılmaksızın gönderilecek.CORS Middleware always allows four headers in the Access-Control-Request-Headers to be sent regardless of the values configured in CorsPolicy.Headers. Üst bilgi bu liste aşağıdakileri içerir:This list of headers includes:

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

Örneğin, şu şekilde yapılandırılmış bir uygulama göz önünde bulundurun:For instance, consider an app configured as follows:

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

CORS ara yazılımın yanıt başarıyla bir denetim öncesi isteği şu istek üst bilgisi için çünkü Content-Language her zaman izin verilenler listesinde olur: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

İfşa edilen yanıt üstbilgilerini AyarlaSet the exposed response headers

Varsayılan olarak, tüm yanıt üstbilgilerini uygulamaya tarayıcı ortaya çıkarmıyor.By default, the browser doesn't expose all of the response headers to the app. Daha fazla bilgi için W3C çıkış noktaları arası kaynak paylaşımı (terminolojisi): Basit bir yanıt üstbilgisi.For more information, see W3C Cross-Origin Resource Sharing (Terminology): Simple Response Header.

Varsayılan olarak kullanılabilir olan yanıt üstbilgilerini şunlardır:The response headers that are available by default are:

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

Bu üst CORS belirtimi çağırır basit yanıt üstbilgilerini.The CORS specification calls these headers simple response headers. Diğer üst bilgileri uygulama için kullanılabilir hale getirmek için çağrı WithExposedHeaders:To make other headers available to the app, call WithExposedHeaders:

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

Çıkış noktaları arası istekleri kimlik bilgileriCredentials in cross-origin requests

Özel işleme bir CORS isteğinde kimlik bilgilerini gerektirir.Credentials require special handling in a CORS request. Varsayılan olarak, tarayıcının çıkış noktaları arası istek ile kimlik bilgileri göndermez.By default, the browser doesn't send credentials with a cross-origin request. Tanımlama bilgileri ve kimlik doğrulama düzeni HTTP kimlik bilgileri içerir.Credentials include cookies and HTTP authentication schemes. İstemci kimlik bilgileriyle bir çıkış noktaları arası istek göndermek için ayarlamalısınız XMLHttpRequest.withCredentials için true.To send credentials with a cross-origin request, the client must set XMLHttpRequest.withCredentials to true.

Kullanarak XMLHttpRequest doğrudan:Using XMLHttpRequest directly:

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

JQuery kullanarak:Using jQuery:

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

Kullanarak Fetch API'sini:Using the Fetch API:

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

Sunucu kimlik bilgilerine izin vermeniz gerekir.The server must allow the credentials. Çıkış noktaları arası kimlik bilgilerini sağlamak için çağrı AllowCredentials:To allow cross-origin credentials, call AllowCredentials:

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

HTTP yanıtı içeren bir Access-Control-Allow-Credentials sunucu çıkış noktaları arası istek için kimlik bilgilerini sağlayan tarayıcı söyler. başlığı.The HTTP response includes an Access-Control-Allow-Credentials header, which tells the browser that the server allows credentials for a cross-origin request.

Tarayıcı bilgilerini gönderir, ancak yanıt geçerli bir içermez Access-Control-Allow-Credentials üst bilgi, tarayıcı olmayan uygulama yanıtı kullanımına sunun ve çıkış noktaları arası istek başarısız olur.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.

Çıkış noktaları arası kimlik bilgilerini sağlayan bir güvenlik riski oluşturur.Allowing cross-origin credentials is a security risk. Başka bir etki alanındaki bir Web sitesi kullanıcı bilgisi olmadan kullanıcı adına uygulamasında oturum açmış kullanıcının kimlik bilgilerini gönderebilirsiniz.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 belirtimi Ayrıca bu ayar durumları için kaynakları "*" (tüm kaynaklar) geçersiz, Access-Control-Allow-Credentials başlığı.The CORS specification also states that setting origins to "*" (all origins) is invalid if the Access-Control-Allow-Credentials header is present.

Denetim öncesi isteğiPreflight requests

Bazı CORS istekleri için tarayıcı, gerçek isteği yapmadan önce ek bir istek gönderir.For some CORS requests, the browser sends an additional request before making the actual request. Bu istek adında bir denetim öncesi isteği.This request is called a preflight request. Aşağıdaki koşullar doğruysa, tarayıcının denetim öncesi isteği atlayabilirsiniz:The browser can skip the preflight request if the following conditions are true:

  • İstek yöntemini GET, HEAD veya POST ' dir.The request method is GET, HEAD, or POST.
  • Uygulama dışında istek üst bilgilerini ayarlayıp ayarlamadığını Accept, Accept-Language, Content-Language, Content-Type, veya 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 Üst bilgi, ayarla, aşağıdaki değerlerden birine sahiptir:The Content-Type header, if set, has one of the following values:
    • application/x-www-form-urlencoded
    • multipart/form-data
    • text/plain

İstek üstbilgileri kural kümesi çağırarak uygulama ayarlar üst bilgileri istemci isteği uygulandığı için setRequestHeader üzerinde XMLHttpRequest nesne.The rule on request headers set for the client request applies to headers that the app sets by calling setRequestHeader on the XMLHttpRequest object. Bu üst CORS belirtimi çağırır yazar, istek üst bilgilerini.The CORS specification calls these headers author request headers. Tarayıcı ayarlayabilir, gibi üstbilgileri kuralı uygulanmaz User-Agent, Host, veya Content-Length.The rule doesn't apply to headers the browser can set, such as User-Agent, Host, or Content-Length.

Denetim öncesi isteğinin bir örneği verilmiştir: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

Uçuş öncesi isteğinin HTTP OPTIONS yöntemini kullanır.The pre-flight request uses the HTTP OPTIONS method. Bu, iki özel üst bilgileri içerir:It includes two special headers:

  • Access-Control-Request-Method: Fiili istek için kullanılacak HTTP yöntemi.Access-Control-Request-Method: The HTTP method that will be used for the actual request.
  • Access-Control-Request-Headers: Uygulamayı gerçek istekte ayarlar istek üst bilgilerini içeren bir liste.Access-Control-Request-Headers: A list of request headers that the app sets on the actual request. Daha önce belirtildiği gibi bu tarayıcı ayarlar, aşağıdaki gibi üst bilgiler içermez User-Agent.As stated earlier, this doesn't include headers that the browser sets, such as User-Agent.

CORS denetim öncesi isteği içerebilir bir Access-Control-Request-Headers üst bilgi sunucuya gerçek isteğiyle gönderilen üst bilgiler gösterir.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.

Özel üst bilgiler izin vermek için çağrı WithHeaders:To allow specific headers, call WithHeaders:

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

Tüm istek üstbilgilerini Yazar izin vermek için çağrı AllowAnyHeader:To allow all author request headers, call AllowAnyHeader:

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

Bunlar nasıl kümesinde tamamen tutarlı olmayan tarayıcıları Access-Control-Request-Headers.Browsers aren't entirely consistent in how they set Access-Control-Request-Headers. Üst bilgileri için herhangi bir şey dışında ayarlarsanız "*" (veya AllowAnyHeader), en az içermelidir Accept, Content-Type, ve Origin, artı, desteklemek istediğiniz tüm özel üst.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.

(Sunucu isteği izin varsayılarak) denetim öncesi isteği için bir örnek yanıt aşağıdaki gibidir: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

Yanıt içeren bir Access-Control-Allow-Methods izin verilen yöntemleri listeleyen üst bilgi ve isteğe bağlı olarak bir Access-Control-Allow-Headers izin verilen üstbilgileri listeleyen üst bilgisi.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. Denetim öncesi isteği başarıyla sonuçlanırsa, tarayıcı gerçek isteği gönderir.If the preflight request succeeds, the browser sends the actual request.

Denetim öncesi isteği reddedilirse, uygulamayı döndürür bir 200 Tamam yanıt geri CORS üst bilgileri göndermez ancak.If the preflight request is denied, the app returns a 200 OK response but doesn't send the CORS headers back. Bu nedenle, tarayıcının çıkış noktaları arası istek çalışmaz.Therefore, the browser doesn't attempt the cross-origin request.

Denetim öncesi sona erme saati ayarlaSet the preflight expiration time

Access-Control-Max-Age Üstbilgisini belirtir ne kadar süreyle denetim öncesi isteğin yanıtını önbelleğe alınabilir.The Access-Control-Max-Age header specifies how long the response to the preflight request can be cached. Bu başlık ayarlamak için çağrı SetPreflightMaxAge:To set this header, call SetPreflightMaxAge:

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

CORS nasıl çalışır?How CORS works

Bu bölümde, ne açıklar bir CORS HTTP iletileri düzeyinde istek.This section describes what happens in a CORS request at the level of the HTTP messages.

  • CORS olduğu değil bir güvenlik özelliğidir.CORS is not a security feature. CORS bir sunucunun gevşek bir aynı çıkış noktası İlkesi olanak W3C standart ' dir.CORS is a W3C standard that allows a server to relax the same-origin policy.
    • Örneğin, kötü amaçlı bir aktör kullanabilirsiniz önlemek siteler arası betik (XSS) sitenize karşı ve bilgilerini çalmak için siteler arası istek kendi CORS etkin siteye yürütün.For example, a malicious actor could use Prevent Cross-Site Scripting (XSS) against your site and execute a cross-site request to their CORS enabled site to steal information.
  • CORS vererek özelliği API'nizi güvenli değil.Your API is not safer by allowing CORS.
    • İstemci (tarayıcı) CORS zorunlu aittir.It's up to the client (browser) to enforce CORS. Sunucusu isteği yürütür ve yanıtı döndürür, hata ve blokları yanıtı döndürür istemcidir.The server executes the request and returns the response, it's the client that returns an error and blocks the response. Örneğin, aşağıdaki araçlardan herhangi birini sunucu yanıtı görüntülenir:For example, any of the following tools will display the server response:
  • Bir çıkış noktaları arası yürütmek için bir yol tarayıcılar izin vermek bir sunucu için olan XHR veya Fetch API'sini aksi alınamaz istek.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.
    • Çıkış noktaları arası istekleri (CORS) olmayan tarayıcıları yapamazsınız.Browsers (without CORS) can't do cross-origin requests. CORS önce JSONP bu kısıtlama aşmak için kullanıldı.Before CORS, JSONP was used to circumvent this restriction. JSONP XHR kullanmaz, kullandığı <script> yanıtını almak için etiket.JSONP doesn't use XHR, it uses the <script> tag to receive the response. Betikleri yüklenen çıkış noktaları arası izin verilir.Scripts are allowed to be loaded cross-origin.

CORS belirtimi çıkış noktaları arası istekleri etkinleştirme birkaç yeni HTTP üstbilgileri sunmuştur.The CORS specification introduced several new HTTP headers that enable cross-origin requests. Bir tarayıcı CORS destekliyorsa, bu üstbilgileri çıkış noktaları arası istekleri için otomatik olarak ayarlar.If a browser supports CORS, it sets these headers automatically for cross-origin requests. Özel JavaScript kodu, CORS'yi etkinleştirmek için gerekli değildir.Custom JavaScript code isn't required to enable CORS.

Çıkış noktaları arası isteğinin bir örneği verilmiştir.The following is an example of a cross-origin request. Origin Üst bilgi isteği yapan site etki alanı sağlar: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

Sunucu isteği izin veriyorsa, bu ayarlar Access-Control-Allow-Origin yanıt üst bilgisi.If the server allows the request, it sets the Access-Control-Allow-Origin header in the response. Bu üst bilgi değeri ya da eşleşen Origin istekteki üstbilgi veya joker karakter değeri "*", yani her türlü kaynağa izin verilir: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

Yanıt içermiyorsa Access-Control-Allow-Origin üst bilgi çıkış noktaları arası istek başarısız olur.If the response doesn't include the Access-Control-Allow-Origin header, the cross-origin request fails. Özellikle, tarayıcının isteği izin vermiyor.Specifically, the browser disallows the request. Sunucunun başarılı bir yanıt döndürürse bile, tarayıcı yanıtı istemci uygulamasının kullanımına yapmaz.Even if the server returns a successful response, the browser doesn't make the response available to the client app.

CORS'yi test etmeTest CORS

CORS test etmek için:To test CORS:

  1. Bir API projesi oluşturma.Create an API project. Alternatif olarak, örneği indirin.Alternatively, you can download the sample.
  2. Yaklaşımlardan biri bu belgeyi kullanarak CORS'yi etkinleştirin.Enable CORS using one of the approaches in this document. Örneğin: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();
}

Uyarı

WithOrigins("https://localhost:<port>"); benzer şekilde bir örnek uygulamayı test etmek için yalnızca kullanılmalıdır örnek kodu indirdikten.WithOrigins("https://localhost:<port>"); should only be used for testing a sample app similar to the download sample code.

  1. (Razor sayfaları veya MVC) bir web uygulaması projesi oluşturun.Create a web app project (Razor Pages or MVC). Razor sayfaları örnek kullanır.The sample uses Razor Pages. API projesi olarak aynı çözüm içindeki web uygulaması oluşturabilirsiniz.You can create the web app in the same solution as the API project.
  2. Aşağıdaki vurgulanmış kodu ekleyin Index.cshtml dosyası: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. Önceki kod içinde url: 'https://<web app>.azurewebsites.net/api/values/1', dağıtılan uygulamanın URL'siyle.In the preceding code, replace url: 'https://<web app>.azurewebsites.net/api/values/1', with the URL to the deployed app.

  2. API projesini dağıtın.Deploy the API project. Örneğin, Azure'a dağıtma.For example, deploy to Azure.

  3. Masaüstünden Razor sayfaları veya MVC uygulamayı çalıştırın ve tıklayarak Test düğmesi.Run the Razor Pages or MVC app from the desktop and click on the Test button. Hata iletilerini gözden geçirmek için F12 araçları kullanın.Use the F12 tools to review error messages.

  4. Localhost merkezinden kaldırın WithOrigins ve uygulamayı dağıtırsınız.Remove the localhost origin from WithOrigins and deploy the app. Alternatif olarak, farklı bir bağlantı noktası ile istemci uygulaması çalıştırın.Alternatively, run the client app with a different port. Örneğin, Visual Studio'dan çalıştırma.For example, run from Visual Studio.

  5. İstemci uygulaması ile test edin.Test with the client app. CORS hatalarını hata döndürür, ancak hata iletisi, JavaScript için kullanılamaz.CORS failures return an error, but the error message isn't available to JavaScript. Konsolu sekmesine, hatayı görmek için F12 araçlarındaki kullanın.Use the console tab in the F12 tools to see the error. Tarayıcıya bağlı olarak, bir hata (F12 araçları konsolunu) aşağıdakine benzer da alın:Depending on the browser, you get an error (in the F12 tools console) similar to the following:

    • Microsoft Edge kullanarak:Using Microsoft Edge:

      SEC7120: [CORS] kaynağını https://localhost:44375 değil buldunuz https://localhost:44375 çıkış noktaları arası kaynak için Access-Control-Allow-Origin yanıtı üstbilgisi içinde 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 kullanarak:Using Chrome:

      Erişim sırasında XMLHttpRequest https://webapi.azurewebsites.net/api/values/1 kaynaktan https://localhost:44375 CORS İlkesi tarafından engellendi: İstenen kaynak üzerinde 'Access-Control-Allow-Origin' üst bilgi yok.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.

Ek kaynaklarAdditional resources