스프링부트 CORS 정책 허용 설정 방법

---

[1] 개요

---

제목에 썼다시피 CORS, 즉 기본적으로 브라우저 상에서 차단하고 있는
교차 출처 리소스 공유 정책에 대한 허용을 Spring에서 허용하는 방법을 작성하고자 합니다.

그 전에 한 마디 하고 싶은 게 있는데,

꼭, 맨 아래 단원의 참조 포스트 1, 2번을 보시길 강력하게 추천합니다.

[2] 방법

---

방법이라고 해 봤자 간단합니다.

프로젝트에서, 어디 각종 설정파일들을 두는 패키지 하나 만들고
그곳에 cors를 허용하는 설정을 코드로 입력하면 됩니다.

보통은 config 라는 이름의 패키지를 만들어서 두긴 합니다.

스프링뿐만 아니라, 다른 Nodejs의 Express, Python의 Django도 모두 동일한 원리입니다.
백엔드에서 이를 허용해주어야 해당 API를 가져올 수 있습니다.

백문이 불여일견이라고, 아래처럼 config 패키지(=폴더)를 만듭니다.

그리고 config 패키지에 자기가 원하는 이름의 클래스를 만들어 줍니다.

저는 WebConfig 라고 하겠습니다.

WebConfig.java

package 내_패키지_경로.config;

import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;

@Configuration
public class WebConfig implements WebMvcConfigurer {
    
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                .allowedOrigins("해당 API를 요청하는 쪽의 url");
    }
}

위에 .allowedOrigins() 함수 내 url은 주로 프런트엔드 서버의 요청이 들어올 것입니다.

예를 들어, 자기 로컬 환경에서 만든 React의 경우엔

http://localhost:3000가 프로젝트 root url이 될 것입니다.

그러면 .allowedOrigins(“http://localhost:3000") 와 같이 쓰면,

해당 url 을 베이스로 사용하는 모든 url에서

우리가 만든 백엔드의 API를 사용할 수 있게 됩니다.

[3] 결론

---

위에서 쓴 대로 그냥 패키지 하나 만들고,
파일 하나 만들고,
짤막한 코드 몇 줄 적으면 끝입니다.

개인적으로 국비 지원 때 팀 프로젝트 할 때 이것 때문에 꽤나 고생했는데, 방법은 간단했습니다.

위에서 적은 방법은 (1) 서버쪽에서 특정 프론트엔드에 CORS 정책 허용하는 방법입니다.

서버에서 서버로 통신 시에는,

다시 말해, (2) 서버인 백엔드에서 다른 서버의 API를 가져올 때는 CORS가 적용되지 않습니다.

그럼, (3) 프론트엔드에서 외부 서버로 CORS 정책 허용을 요청하게 해야 할 때는 어떻게 하나요?

찾아보니 방법은 꽤 있었습니다.

1. 타인의 프록시 서버를 이용하여 서버 > 서버 통신인 것 처럼 보이게 하기
2. 직접 프록시 서버를 구축하여 1번처럼 사용(단, 서버에서 설정도 해주어야 하는 것 같음)
3. 로컬 환경에서 서버, 클라이언트 모두 실행하였다면 프론트엔드에서 http-proxy-middleware 사용
4. 서버에서 CORS 정책을 허용하기 (제가 본 게시글에서 사용한 방법입니다)
5. 서버에서 CORS 미들웨어 설정하기(Express.js 처럼 미들웨어를 사용하는 서버인 경우)

등이 있다고 합니다.

모두 시도는 해보지 않았지만, 참조 사이트에 링크를 남기겠습니다.

개인적으로 프론트엔드에서 외부 백엔드에 Http 요청을 보낼 때 CORS 허용하는 방법은 없다고 생각해왔고,
국비 지원때도 온갖 방법으로 프론트에서 시도하였지만 실패했었고,
프론트에서 가능하다고 말하는 분들을 모두 부정해왔는데, 위에 쓴 대로 된다면 방법이야 있는 것 같습니다.

오늘 한 번 프록시를 이용한 요청을 시도해보려고 합니다.

[4] 참조 사이트

---

1. [Browser] CORS란? (추천1)
2. CORS 😫 (추천2)
3. CSRF, CORS 개념
4. CORS는 왜 이렇게 우리를 힘들게 하는걸까?
5. 나를 너무나 힘들게 했던 CORS DPFJ 해결하기