İçeriğe geç

ASP.Net Core WebAPI Access-Control-Allow-Origin CORS Hatası ve Çözümü

ASP.Net Core ile çalıştığınızda WebAPI  üzerinden iletişim kuruyorsanız Access-Control-Allow-Origin CORS hatası alabilirsiniz. Hatta almış olmalısınız ki şu an bu yazıyı okuyorsunuz 🙂

Hata metni şu şekilde gelecektir: Access to XMLHttpRequest at ‘X’ from origin ‘https://localhost:44398’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.

Hatanın Nedeni:

Buradaki sorun uygulamanızın kaynak talebini tarayıcınız üzerinden javascript ile (HTTP header) çekmeye çalışmanız ancak bu talebe ASP.Net Core WebAPI üzerinde izin verilmemiş olmasıdır. Tabi ki gerekli izin verilmediği için de Access-Control-Allow-Origin hatası meydana gelmektedir.

Hatanın Çözümü:

Bunun için Cross-Origin Resource Sharing (CORS) yapılandırmasının kaynak tarafında yani webapi core’da yapılması gerekir.

Öncelikli olarak WebAPI Core projenizde Startup.cs dosyasını açın;

Class’ın Global Scope’unda policy ismini set edin:

readonly string ApiCorsPolicy = "_apiCorsPolicy";

Ardından ConfigureServices scope’una aşağıdaki kodu ekleyin, burada kaynağınıza erişmeye yetkili siteleri belirtin. string array olduğu için birden fazla siteye izin verebilirsiniz:

services.AddCors(options => options.AddPolicy(ApiCorsPolicy, builder =>
            {
                builder.WithOrigins("http://localhost:44398", "http://www.example.com").AllowAnyOrigin();
                //.AllowAnyMethod()
                //.AllowAnyHeader()
                //.AllowCredentials();
            }));

Son olarak da Configure scope’u içine CORS’u etkinleştiren UseCors extension metodunu ekleyin:

app.UseCors(ApiCorsPolicy);

Startup.cs dosyanız aşağıdaki gibi görünecektir. siz kendi kodunuzda ilgili yerlere yerleştirebilirsiniz. Burada en basit hali ile veriyorum:

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

        public IConfiguration Configuration { get; }
        readonly string ApiCorsPolicy = "_apiCorsPolicy";

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

        public void Configure(IApplicationBuilder app, IHostingEnvironment env)
        {
            if (env.IsDevelopment())
            {
                app.UseDeveloperExceptionPage();
            }
            else
            {
                app.UseHsts();
            }
            //Service skope'unda yazdığımız CORS kuralını aktif ediyoruz. 
            app.UseCors(ApiCorsPolicy);

            app.UseSession();
          
            app.UseMvc(config =>
            {
                config.MapRoute(name: "areas", template: "{area:exists}/{controller=Home}/{action=Index}/{id?}");
            });
        }
    }

 

Tarih:.Net Core (Nasıl Yaparım)

Kimler Neler Demiş?

avatar
  Subscribe  
Bildir