[C#] ASP.NET Core에서 CORS 문제 해결하기

ASP.NET Core에서 CORS 문제 해결하기

현재 사용중인 버전은 .NET 8.0이라는 것을 참고한다.
 

오류 발생

웹 개발 공부를 위해 프로젝트를 구성하던 중 문제가 발생하였다.
프론트엔드와 백엔드를 서로 다른 프로젝트로 분리했는데 자바스크립트에서 아래와 같은 오류가 발생한 것이다.

No 'Access-Control-Allow-Origin' header is present on the requested resource

위 오류메시지는 웹 브라우저의 개발자 도구 - 콘솔에서 확인할 수 있다.
 
이것은 동일 출처 정책(Same-Origin-Policy)때문에 일어난 오류이다.
동일 출처 정책에 관한 자료는 아래 링크를 잠고한다.
동일 출처 정책(SOP)과 교차 출처 리소스 공유(CORS) (tistory.com)
 
따라서 다른 도메인에서도 접근할 수 있도록 별도의 CORS 설정이 필요하다.
 

CORS 미들웨어 추가하기

문제 해결을 위해 Program.cs에서 CORS 미들웨어를 추가해야 한다.
아래 코드는 모든 출처에 대해 접근을 허용하는 설정이다.

// Programs.cs 파일에 추가
// 정책 이름 지정
var MyAllowSpecificOrigins = "_myAllowSpecificOrigins";
builder.Services.AddCors(options =>
{
    options.AddPolicy(name: MyAllowSpecificOrigins,
                      policy =>
                      {
                          policy.AllowAnyOrigin();
                          policy.AllowAnyHeader();
                          policy.AllowAnyMethod();
                      });
});

// CORS 미들웨서 추가
app.UseCors(MyAllowSpecificOrigins);