Spring CORS 설정: WebConfig 작성부터 wildcard '*', withCredentials 문제 해결까지

[왜 WebConfig를 작성해야 할까?]

프론트엔드와 백엔드가 분리된 환경에서는 각각의 도메인이 다르기 때문에 브라우저는 보안상의 이유로 자동으로 요청을 막는다. 이걸 CORS(Cross-Origin Resource Sharing)라고 한다.  

 

예를 들어 프론트앤드의 DNS 주소는 https://project-test인데  프론트가 백에게 API를 요청할 때는 https://api-project-test로 넘겨 주게 된다. 이 경우, 브라우저는 서버에 직접 요청을 보내기 전에 OPTIONS 메서드로 사전요청(preflight)을 보낸다. 그런데 백엔드에서는  "응답 가능해~"라고 명시적으로 허용하지 않으면, 브라우저는 요청 자체를 막아버리는 것이다. 이때 필요한게 바로 WebConfig를 통한 CORS 설정이다. 

 

[webConfig 작성법]

@Configuration
public class WebConfig {

	@Bean
	public WebMvcConfigurer corsConfigurer() {
		return new WebMvcConfigurer() {
			@Override
			public void addCorsMappings(CorsRegistry registry) {
				registry.addMapping("/**") // 모든 경로에 대해
					.allowedOrigins("https://reading-log-zeta.vercel.app") // 프론트 도메인만 허용
					.allowedMethods("GET", "POST", "PUT", "DELETE", "PATCH") // 허용할 메서드
					.allowCredentials(true) // 인증정보(Cookie 등) 허용
					.allowedHeaders("*") // 어떤 헤더든 허용
					.maxAge(3600); // preflight 요청 캐싱 시간 (1시간)
			}
		};
	}
}

 

이 설정이 적용 되면 ① 배포된 프론트가 API 요청을 자유롭게 보낼 수 있고 ② 인증/세션 기반 요청도 credentials: true로 제대로 작동하고 ③ OPTIONS 요청에 제대로 응답하게되어 preflght 실패도 나지 않을 것이다. 

 

[💡TIPS]

① 여러 Origin을 지원하고 싶다면 allowedOrigins 대신. allowedOriginPatterns을 사용하고 쉼표로 나눠준다. 

.allowedOriginPatterns("https://*.vercel.app", "http://localhost:3000")

 

② 도메인 와일드카드 사용시 credentials을 사용할 수 없음으로 주의하자. 이렇게 사용했다면 이런 오류가 뜰 것이다. 

Access to XMLHttpRequest at 'https://api.example.com/data' from origin 'https://frontend.com' has been blocked by CORS policy: The value of the 'Access-Control-Allow-Origin' header in the response must not be the wildcard '*' when the request's credentials mode is 'include'.

 

         allowedOrigins("*") 설정           
     → 모든 도메인 허용 (와일드카드 사용)     

                     │
                     ▼
     ❌ allowCredentials(true) 사용 불가!
     (브라우저에서 보안상 차단됨)

─────────────────────────────────────────────

 allowedOrigins("https://corstest.com") 설정 
  → 정확한 도메인만 허용 (정적 값)            

                     │
                     ▼
     ✅ allowCredentials(true) 사용 가능!
     (인증 쿠키, 세션 등 주고받을 수 있음)