ASP NET CORE 7 CORS 설정

안녕하세요 엠엔디시스템입니다

Access to XMLHttpRequest at *발신아이피주소* from origin *수신아이피주소* has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

프로젝트 진행중에 프론트는 Flutter WEB 을 활용하고 백엔드는 ASP NET CORE 7 WEB API 로 개발을 진행하던 와중에 해당 에러를 직면하게 되었습니다 .

해당 에러를 읽어보면 Cors 정책에 의하여 차단이 되었다고 볼수있는데 Cors 정책이라는게 무엇일까요 ?

Cors 정책을 검색하여 읽어보면 프로토콜 또는 포트번호가 다르면 !! 해당 출처간의 리소스를 주고받는 것을 막는 정책인듯합니다

그러면 어떻게 해결해야할까요 ??

1. 프로토콜 및 포트를 일치
   저는 프론트는 사내 웹서버를 활용하여 호스팅하였기에 웹서버를 바꾸기엔 무리가 있었고 API 또한 원격 클라우드서버의 IIS 를 활용하고 있기도 하고 기존에 프로젝트들을 묶어서 유지보수 하고있었기 때문에 웹,API 서버의 설정을 바꾸는 방법을 어려웠습니다
2. ASP NET CORE API 에서 Cors 정책 허용
   해당 게시글을 작성하게 된 이유인데요 ASP NET CORE 7 에서 Cors 정책을 허용하는 방법입니다.

Program.cs 파일에서 Cors 정책을 허용하여줍니다.

var builder = WebApplication.CreateBuilder(args);

// Add services to the container.

builder.Services.AddControllers();

// Cors 추가
builder.Services.AddCors();

.
.
.

var app = builder.Build();

// app Cors 허용 Origins 추가.
app.UseCors(options =>
{
    options.WithOrigins("http://접속하는 주소");
});

app.UseHttpsRedirection();

app.UseAuthorization();

app.MapControllers();

app.Run();

이렇게 Cors 정책을 허용하여 주고 다시 게시하여 배포해주면 정상적으로 작동하는 걸 확인할수있습니다. 

감사합니다.

 

엠엔디시스템
Tel. 055-385-4832
HP. mndsystem.com
Adr. 경상남도 양산시 범구로 25 디온플레이스앤메디 401호