[angular] CORS 정책 및 .NET Core 3.1의 문제

무엇을 놓치고 있는지 잘 모르겠지만 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.

최신 정보:

내가 비록 잘못 CORS를 구성하는 (그리고 허용 대답은 아래 그와 실제로 도움에서했던) 문제의 근본는 무관했다. 추가 컨텍스트의 경우 CLI를 사용하여 API 및 Angular 앱을 실행할 때 앱이 완벽하게 작동했습니다. 웹 서버에 모두 배포 한 후에 만이 문제가 발생했습니다.

“실제” 문제는 내가 단지 API에 플랫 파일 오류 로깅을 추가하고 앱이 모든에 SQL에 연결할 수 없음을 찾기 위해 SQL Server 추적을 실행 한 후 발견 된 SQL 연결에 관련된 었죠.

나는 보통 이것이 500을 반환 할 것으로 예상하고 10 초 만에 문제를 깨달았을 것이다. 그러나 CORS의 잘못된 설정은 CORS 미들웨어가 먼저 실패했기 때문에 500이 실제로 반환되지 않았 음을 의미한다. 이것은 절대적으로 말하기를 매우 좌절했습니다! . 그러나 만약 당신이 원한다면 “잘못된 토끼를 쫓고”있었기 때문에 다른 사람들이 이런 상황에 처할 경우를 대비하여 여기에 추가하고 싶습니다. CORS 구성을 수정 한 후 실제 문제는 CORS와 전혀 관련이 없음을 깨달았습니다.

TL; DR; -CORS 정책이 올바르게 설정되지 않은 경우 “Non-CORS”.NET 서버 측 오류가 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클라이언트 와 함께 사용하려면 해당 줄을 주석 처리하거나 제거해야합니다.

이 문제 CORS는와 함께 있지 않고 https로 인해이 문제가 발생하지만 오류가 발생하면 CORS에서 오류가 발생합니다.


답변

이 유틸리티를 사용해보십시오

https://www.nuget.org/packages/Microsoft.AspNetCore.Cors/이를
사용하여 .net 핵심 응용 프로그램에서 cors를 활성화 / 비활성화 할 수 있습니다


답변

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()
            )
        );

마지막으로 Configure메소드에 cors를 사용하십시오 (사용 순서에 관계없이!)

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


답변