[Spring] CORS 에러 해결을 위한 설정 및 포스트맨으로 테스트 하는 방법

 

문제 배경

---

 

시큐리티를 사용안하면 ip 허용 설정을 하지 않아도 되는 줄 알았는데 프론트 서버 배포 후 CORS 에러가 생겼다.

찾아보니 CORS는 웹 브라우저의 보안 메커니즘이며 서버의 시큐리티 설정과는 별개라고 한다.

 

CORS(Cross-Origin Resource Sharing)란?

브라우저에서 다른 도메인(출처)의 리소스를 요청할 때 발생하는 보안 제한을 관리하는 메커니즘이다.

웹 페이지가 A.com 도메인에서 로드되었고, 이 웹 페이지가 B.com의 API를 호출하려고 할 때, 브라우저는 동일 출처 정책(Same-Origin-Policy)에 의해 이 요청을 차단하려고 한다.

이 때 B.com 서버에서 적절한 CORS 헤더를 반환하면 이 요청이 허용될 수 있다. 

 

즉, 시큐리티 설정이 되어 있지 않은 서버라도 해당 서버가 CORS 헤더를 적절히 반환하지 않으면 웹 브라우저에서는 CORS 에러가 발생할 수 있다. 

 

서버가 CORS를 지원하려면 응답 헤더에 'Access-Control-Allow-Origin'을 포함해야 한다. 

 

 

문제 해결

---

@Configuration
public class WebConfig implements WebMvcConfigurer {

    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                .allowedOrigins("https://java-jober.netlify.app", "http://localhost:5173")
                .allowedMethods("GET", "POST", "PUT", "DELETE")
                .allowedHeaders("*")
                .allowCredentials(true)
                .maxAge(3600);
    }
}

위와 같이 WebConfig 클래스에 addCorsMapping 메소드를 추가하고 서버를 재배포하였다. 

처음에는 모든 도메인(출처)를 허용하려고 .allowedOrigins("*") 로 했었는데 allowCredentials 를 true로 설정하면, 브라우저가 크리덴셜(쿠키나 http 인증과 같은)이 있는 응답을 프론트엔드  JavaScript에 노출하도록 허용한다.

그러나 보안 상의 이유로 true일 때는 allowedOrigins에 "*"를 사용할 수 없다고 한다. 

 

그래서 allowCredentials를 true로 설정한다면, 

1. allowedOriginsPatterns에 크리덴션을 허용하는 특정 출처 집합이 있다면 명시적으로 나열하거나
2. allowedOrigins에 특정 도메인을 명시해주어야 한다.

이렇게 해주어야 한다.

 

그래서 프론트 배포 주소와 프론트의 로컬 주소를 명시해주었다.

(프론트 로컬주소는 프론트 개발자 분들이 개발 환경에서 서버랑 통신하기 위해 필요)  

 

 

테스트 방법

---

포스트맨에서 Headers에 위와 같이 키와 값을 넣고 요청하면

응답 Headers에 Access-Control-Allow-Origin 값이 허용한 도메인으로 설정되어 있으면 CORS 설정이 잘 된것이다!