문제 상황
프론트 엔드와 1:N 채팅 구현 시
cors 설정을 전체 허용으로 해 놓았는데도
프론트 엔드 에서 요청을 해도 403 상태 코드만 받고
백엔드 서버 로그에는 어떠한 에러인지 안 보이는 상황
원인
•
브라우저가 strict cors 로 되어 있어서 cors 설정을 전체로 해도 에러가 발생
해결
strict cors 일때 전체 허용(”*”)을 하지 않고 특정 Origin 을 명시해 줘야함
•
코드 수정
// SecurityConfig.java
/**
* Cors 정책 설정
*
* @return CorsConfigurationSource
*/
@Bean
protected CorsConfigurationSource corsConfigurationSorce() {
CorsConfiguration corsConfigurationV1 = new CorsConfiguration();
corsConfigurationV1.addAllowedOrigin("*");
corsConfigurationV1.addAllowedMethod("*");
corsConfigurationV1.addAllowedHeader("*");
UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
source.registerCorsConfiguration("/api/**", corsConfigurationV1);
source.registerCorsConfiguration("/ws/**", corsConfigurationV1);
return source;
}
⬇️
/**
* Cors 정책 설정
*
* @return CorsConfigurationSource
*/
@Bean
protected CorsConfigurationSource corsConfigurationSorce() {
CorsConfiguration corsConfigurationV1 = new CorsConfiguration();
corsConfigurationV1.addAllowedOrigin("http://localhost:3000"); // 명확한 Origin 명시
corsConfigurationV1.setAllowCredentials(true);
corsConfigurationV1.addAllowedMethod("*");
corsConfigurationV1.addAllowedHeader("*");
UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
source.registerCorsConfiguration("/api/**", corsConfigurationV1);
source.registerCorsConfiguration("/ws/**", corsConfigurationV1);
return source;
}
Java
복사
// WebSocketConfigration.java
@Override
public void registerStompEndpoints(StompEndpointRegistry registry) {
registry.addEndpoint("/signaling").setAllowedOriginPatterns("*")
.withSockJS();
registry.addEndpoint("/ws").setAllowedOriginPatterns("*")
.withSockJS();
}
⬇️
@Override
public void registerStompEndpoints(StompEndpointRegistry registry) {
registry.addEndpoint("/signaling").setAllowedOriginPatterns("*")
.withSockJS();
registry.addEndpoint("/ws")
.setAllowedOriginPatterns("http://localhost:3000") // 명확한 Origin 명시
.withSockJS();
}
Java
복사