ฉันไม่แน่ใจว่าสิ่งที่ฉันหายไป แต่ดูเหมือนว่าไม่สามารถทำให้นโยบาย CORS ของฉันทำงานกับ. NET Core 3.1 และ Angular 8 ฝั่งไคลเอ็นต์

Startup.cs:

        public void ConfigureServices(IServiceCollection services)
        {
            // ...

            // Add CORS policy
            services.AddCors(options =>
            {
                options.AddPolicy("foo",
                builder =>
                {
                    // Not a permanent solution, but just trying to isolate the problem
                    builder.AllowAnyOrigin().AllowAnyMethod().AllowAnyHeader();
                });
            });

            services.AddControllers();
        }

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

            app.UseHttpsRedirection();

            // Use the CORS policy
            app.UseCors("foo");

            app.UseRouting();

            app.UseAuthorization();

            app.UseEndpoints(endpoints =>
            {
                endpoints.MapControllers();
            });
        }

ข้อความแสดงข้อผิดพลาดฝั่งไคลเอ็นต์:

Access to XMLHttpRequest at 'https://localhost:8082/api/auth/' from origin 'http://localhost:4200' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

UPDATE:

แม้ว่าฉันจะตั้งค่า CORS ไม่ถูกต้อง (และคำตอบที่ยอมรับได้ด้านล่างช่วยได้จริง) รากของปัญหาไม่เกี่ยวข้อง สำหรับบริบทเพิ่มเติมแอปทำงานได้ดีอย่างสมบูรณ์เมื่อเรียกใช้ API และแอปพลิเคชัน Angular โดยใช้ CLI - ฉันเพิ่งพบปัญหานี้หลังจากปรับใช้ทั้งสองไปยังเว็บเซิร์ฟเวอร์

ปัญหา"จริง"สิ้นสุดลงซึ่งเกี่ยวข้องกับการเชื่อมต่อ SQL ซึ่งฉันค้นพบหลังจากเพิ่มการบันทึกข้อผิดพลาดไฟล์แฟล็ตไปยัง API และรันการติดตาม SQL Server เพื่อค้นหาว่าแอปไม่สามารถเชื่อมต่อกับ SQL ได้เลย

โดยปกติฉันคาดหวังว่าสิ่งนี้จะส่งคืน 500 และฉันจะได้ตระหนักถึงปัญหาภายใน 10 วินาที - อย่างไรก็ตามการกำหนดค่าผิดพลาดของ CORS หมายถึง 500 ไม่เคยถูกส่งคืนจริงเพราะ CORS มิดเดิลแวร์ล้มเหลวก่อน นี่ช่างน่าผิดหวังอย่างมากที่จะพูดน้อยที่สุด! . อย่างไรก็ตามฉันต้องการที่จะเพิ่มที่นี่ในกรณีที่คนอื่นพบว่าตัวเองอยู่ในสถานการณ์เช่นนี้เพราะฉันเป็น "ไล่กระต่ายผิด" ถ้าคุณจะ หลังจากแก้ไขการกำหนดค่า CORS ฉันรู้ว่าปัญหาจริงไม่เกี่ยวข้องกับ CORS ทั้งหมด

TL; DR; - บางครั้ง "Non-CORS" ข้อผิดพลาดฝั่งเซิร์ฟเวอร์. NET สามารถส่งคืนเป็นข้อผิดพลาด CORS ได้หากนโยบาย CORS ไม่ได้ตั้งค่าอย่างถูกต้อง

อ้างอิง:

https://docs.microsoft.com/en-us/aspnet/core/security/cors?view=aspnetcore-3.1#cors-with-named-policy-and-middleware

https://medium.com/swlh/cors-headers-with-dot-net-core-3-5c9dfc664785

ก่อนอื่นapp.UseRouting();แล้วapp.UseCors("foo");

เปลี่ยนConfigureวิธีการของคุณดังนี้:

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

    app.UseHttpsRedirection();



    app.UseRouting();  // first
    // Use the CORS policy
    app.UseCors("foo"); // second

    app.UseAuthorization();

    app.UseEndpoints(endpoints =>
    {
        endpoints.MapControllers();
    });
}

มันใช้งานได้สำหรับฉัน!

เว็บ API ใช้app.UseHttpsRedirection(); ซึ่งทำให้เกิดCORSปัญหาหากการร้องขอลูกค้าไม่ได้httpsขึ้นอยู่กับ ดังนั้นเพื่อที่จะใช้กับhttpลูกค้าเราจำเป็นต้องแสดงความคิดเห็นหรือลบบรรทัดนั้น

ปัญหานี้ไม่ได้อยู่กับCORShttps ที่ก่อให้เกิดปัญหานี้ แต่ข้อผิดพลาดโยนบอกกับ CORS

ลองใช้วิธีนี้

https://www.nuget.org/packages/Microsoft.AspNetCore.Cors/ การใช้สิ่งนี้คุณสามารถเปิด / ปิดการใช้งาน cors ในแอปพลิเคชัน. net หลักของคุณ

ในขณะที่คุณใช้ localhost เป็นhttp://localhost:4200จากนั้นลองตั้งค่าในการกำหนดค่าของคุณ:

public void ConfigureServices(IServiceCollection services)
{
    services.AddCors(options => options.AddPolicy("ApiCorsPolicy", build =>
    {                
        build.WithOrigins("http://localhost:4200")
             .AllowAnyMethod()
             .AllowAnyHeader();
        }));
        // ... other code is omitted for the brevity
     }
}

และConfigureวิธีการ:

public void Configure(IApplicationBuilder app, IHostingEnvironment env, IServiceProvider provider)
{
    if (env.IsDevelopment())
    {
        app.UseDeveloperExceptionPage();
    }
    app.UseCors("ApiCorsPolicy");
    app.UseHttpsRedirection();
    app.UseAuthentication();
    app.UseMvc();
}

เมื่อเพิ่มบริการ Cors ให้แน่ใจว่าจะรวม.SetIsOriginAllowed((host) => true)หลังจาก.WithOrigins("http://localhost:4200")

services.AddCors(options => {
            options.AddPolicy("mypolicy",builder => builder
            .WithOrigins("http://localhost:4200/")
            .SetIsOriginAllowed((host) => true)
            .AllowAnyMethod()
            .AllowAnyHeader());
  });

สำหรับ. NET CORE 3.1

วิธีที่ดีที่สุดคือการเก็บเส้นทางกำเนิดในไฟล์ app.settings

"Origins": {
    "Server": "http://localhost:5001/",
    "Client": "http://localhost:4200/",
    "CorsOrigins": "http://localhost:4200,http://localhost:5001"
}

และในConfigureServicesวิธีการกำหนดต้นกำเนิดจากส่วนการกำหนดค่า

services.AddCors(
            options => options.AddPolicy(
                PolicyNames.AllowOrigins,
                builder => builder
                    .WithOrigins(
                        Configuration["Origins:CorsOrigins"]
                            .Split(",", StringSplitOptions.RemoveEmptyEntries)
                            .Select(s => s.TrimEnd('/'))
                            .ToArray()
                    )
                    .AllowAnyHeader()
                    .AllowAnyMethod()
                    .AllowCredentials()
            )
        );

สุดท้ายใช้ cors ตามConfigureวิธี (ไม่ต้องใช้คำสั่ง!)

app.UseCors(PolicyNames.AllowOrigins);     //Enable CORS!