İç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();
            }));

“http://localhost:44398” adresi sizin UI projenizin adresi olacaktır. Buradaki port numarasını kendi port numaranızla değiştirmelisiniz.

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.

aktif hale getirdiğimiz “app.UseCors(ApiCorsPolicy);” satırını “app.UseMvc” satırından önce yazdığınıza emin olmalısınız.

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?}");
            });
        }
    }

 

5 2 votes
Article Rating
Tarih:.Net Core (Nasıl Yaparım)
Subscribe
Bildir
guest
3 Yorum
Inline Feedbacks
View all comments
berke
berke
1 ay önce

hala aynı hatayı veriyor aynısını yaptım.

Mustafa
Mustafa
1 ay önce

Teşekkürler !

3
0
Would love your thoughts, please comment.x
()
x