CORS란?

백엔드를 시작하기 전 작은 프로젝트를 진행하면서 Django로 Rest api를 만들었는데요 만들다가 프론트단과 통신을 진행했는데 CORS라는 오류가 나왔었습니다 그 오류 때문에 고생했던 적이 있는데요 오늘은 그 오류에 대해서 알아보겠습니다.

CORS란?

cors는 Cross-Origin Resource Sharing의 약어로 웹 브라우저에서 보안상의 이유로 적용되는 정책으로 출저(origin)가 다른 도메인 간의 리소스 요청을 제한하는 기능입니다.

Origin(출처)란? 

출처는 프로토콜 + 도메인 + 포트로 구성됩니다. 예를 들어 설명을 해보겠습니다.

• https://skgur.com:443
• http://skgur.com:80
• https://api.skgur.com:443

와 같은 출처가 있는데요? 지금 모든 출처가 다르다고 말할 수 있겠습니다 출처가 다를 경우 CORS 정책에 의해 제한될 수 있습니다.

 

CORS의 필요 이유

기본적으로 웹 브라우저는 Same-Origin Policy 줄여서 SOP 정책을 따릅니다. 이 정책은 보안상의 이유로 서로 다른 출처에서 온 요청을 차단하여 악의적인 사이트가 사용자의 데이터를 마음대로 가져가는 것을 방지하기 위한 것입니다.

악의적인 사이트가 사용자의 데이터를 마음대로 가져가는 것을 방지하기 위해 만들어 졌지만 서버와 프론트엔드가 다른 도메인에서 운영되는 경우 예를 들어 api.skgur.com과 fe.example.com에 통신에서도 CORS로 인해 요청이 차단될 수 있습니다. 

 

예시로 들었을때 만약 에러가 나온다면

Access to fetch at 'https://api.skgur.com/' from origin 'https://frontend.skgur.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

이런 식으로 에러가 나오고 이는 서버가 적절한 CORS 설정이 안 되어 있다는 듯 입니다.

 

이러한 에러를 해결하기 위해서

CorsFilter 생성하기, CrossOrigin 어노테이션 사용하기, WebMvcConfigurer에서 설정하기하기 등이 있지만 그 중에서도 쉬운

WebMvcConfigurer에서 설정하기 예제를 보여드리겠습니다 

@Configuration
public class WebConfig implements WebMvcConfigurer {
    
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                .allowedOrigins("https://fe.skgur.com")
                .allowedMethods("GET", "POST", "PUT", "DELETE")
                .allowCredentials(true);
    }
}

이런 식으로 작성이 되고 간단하게 설명하면

• addMapping("/**") : 모든 엔드포인트에 대해 CORS 허용
• allowedOrigins("https://fe/skgur.com") : 특정 출처에서만 요청 허용
• allowedMethods("GET", "POST", ""PUT", "DELETE") : 허용할 HTTP 메서드 지정
• allowCredentials(true) : 쿠키 및 인증 정보 포함 허용

으로 설명할 수 있겠습니다.

 

추가적으로 spring security에서 사용 할려면 SecurityFilterChain에서 CORS 설정을 추가해야합니다.

 

마무리

프로젝트들 깃헙을 보면 spring securit에서 SecurityFilterChaing에서 CORS 설정을 추가하는 부분을 많이 봤는데 이 부분이 이러한 역할을 하고 있구나를 이번 기회에 더 자세히 알게 된거 같다.