[Spring] CORS 쉽게 처리하기

어느날.. 순조롭게 일기장 플랫폼을 개발하던 중 위 사진과 같이 CORS 오류가 발생했다...

 

 

띠용~~ 개발하기도 바쁜데 CORS 오류는 무엇일까..? 그래서 바로 오류를 해결하기 위해 CORS란 무엇이고 해결 방법은 무엇이 있는지 공부하게 되었다. 이번에는 공부한  내용을 바탕으로 CORS 오류에 대해 알아보자!!

---

CORS 넌 뭐니?

 

CORS를 이해하기 위해서 반드시 숙지해야 하는 개념이 있다. 그것은 바로 CORS와 반대 개념을 가진 SOP이다.

SOP(Same-Origin Policy)는 같은 출처의 리소스만 공유할 수 있음을 의미하는 정책이다. 그렇다면 CORS는 무엇일까? 

CORS(Cross-Origin Resource Sharing)는 다른 출처의 자원 사용에 대한 허용/비허용 정책이다.

 

오케이.. CORS에 대해서는 개념을 확실하게 정립했고,, 그렇다면 왜 CORS ERROR가 발생하는 것인가?!!

정답은 SOP 정책을 지키지 않았기 때문이다. 보안상의 이유로 모든 브라우저에서는 기본적으로 SOP 정책을 사용하고 있다. 그러므로 다른 출처의 자원을 사용(CORS)하기 위해서는 개발자가 그 권한을 부여해주어야 한다. 

 

그래서 다음으로 Spring에서 CORS 설정 하는 방법에 대해 소개하겠다.

---

CORS 현명하게 대처하기

 

엄~~~~~~~청 간단하기 때문에 바로 코드를 적용한다면 바로 해결 가능하다!! CORS ERROR를 해결하는 방법은 많겠지만 많이 사용하는 방법 두 가지를 소개하겠다.

 

1. Controller에서 @CrossOrigin annotation 사용하기

@RestController
@CrossOrigin("*")
public class AccountController {
   // blur blur
}

"*"은 모든 곳에서 자원에 접근할 수 있다는 뜻이다. 로컬 환경에서 테스트할 때는 "*"으로 설정해서 많이 사용한다. 하지만 나중에 배포할 때 API를 출처를 모르는 곳에서도 사용하는 문제가 발생할 수 있다. 이를 해결하기 위해 현재 작업하고 있는 도메인만 아래와 같이 설정할 수 있다. 

@RestController
@CrossOrigin("origins = https://kingmj.tk")
public class AccountController {
   // blur blur
}

그런데.. Controller 마다 CrossOrigin annotation을 사용하는 것은 간지가 안난다. 한꺼번에 처리하는 방법이 없을까?!

 

2. WebMvcConfigurer 상속받기

그래서 한번에 처리하는 방법을 들고왔다. 이것도 매우 간단하니 바로 적용 가능할 것이다.

우선 Config class를 하나 생성하자.

@Configuration
public class WebConfig implements WebMvcConfigurer {
    @Override
    public void addCorsMappings(CorsRegistry registry){
        registry.addMapping("/**")
                .allowedOrigins("*")
                .allowedMethods("*");
    }
}

코드를 소개하기 전에 많이 사용하는 CorsRegistry의 메서드에 대해 살펴보자

addMapping()	origin, method 등의 해당 설정을 적용할 API 범위를 지정
allowedOrigins()	자원 사용을 허용할 범위를 지정 (@CrossOrigin 역할)
allowedMethods()	허용할 HTTP Method(GET, POST, ...)를 지정

이외에도 allowedHeaders(), allowCredentials() 등 많은데, 오늘은 CORS 관련이니까 연관 메서드만 소개하겠다. 이제 사용한 메서드가 언제 사용되는지 알게 되었으니 위의 코드를 해석해보자.

 

.addMapping("/**") 

=> 모든 API에 밑의 옵션들을 적용하겠다는 의미이다.
.allowedOrigins("*")

=> 모든 출처에서 자원 사용이 가능하다는 의미이다.
.allowedMethods("*")

=> 모든 HTTP Method를 허용하겠다는 의미이다.

 

서버에 배포할 때는 "*" 옵션은 보안상으로 좋지 않기 때문에 도메인과 Method, 허용 API를 수동으로 설정하는 것을 추천한다.

 

---

결론

 

오늘은 CORS에 대해 공부하는 시간을 가졌다. 아마 개발을 하다보면 CORS 문제는 한번쯤 보았을 것이다. 

처음에는 또 무슨 오류인가 하고 머리가 터질 것 같았지만 해결 방법을 보니 허무할 정도였다. 그만큼 간단하게 해결 가능한 문제였다. 앞으로도 개발을 진행하면서 겪었던 시행착오와 문제 등에 대해 많이 다룰 예정이다.😁😁