Colin's Blog
[스프링] 스프링과 React의 CORS 이슈 해결 방법

웹 애플리케이션을 개발하다 보면, Cross-Origin Resource Sharing (CORS) 문제로 인해 서버와 클라이언트 간의 통신이 제대로 이루어지지 않는 경우가 있습니다. 특히, 스프링과 React를 함께 사용하는 경우 이 문제가 발생할 수 있습니다. 이번 포스트에서는 이 문제를 해결하는 방법에 대해 알아보겠습니다.

CORS란?

CORS는 웹 브라우저 보안 메커니즘 중 하나로, 동일 출처 정책(Same-Origin Policy)을 우회하여 다른 출처 간의 리소스 공유를 허용합니다. 이는 보안을 강화하는데 도움을 줍니다.

그러나, CORS는 클라이언트 애플리케이션이 다른 도메인으로부터 데이터를 읽거나 수정하려고 시도할 때 발생할 수 있는 문제를 일으킬 수 있습니다.

스프링에서 CORS 설정하기

스프링에서 CORS를 설정하려면 WebMvcConfigurer 인터페이스를 구현하는 클래스를 만들어야 합니다. 이 인터페이스를 구현하기 위해서는 @Configuration 어노테이션과 @EnableWebMvc 어노테이션을 사용해야 합니다.

@Configuration
@EnableWebMvc
public class WebConfig implements WebMvcConfigurer {
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
            .allowedOrigins("http://localhost:3000")
            .allowedMethods("GET", "POST", "PUT", "DELETE")
            .allowCredentials(true);
    }
}

위의 코드에서 allowedOrigins에는 허용하려는 클라이언트의 도메인을, allowedMethods에는 허용하려는 HTTP 메서드를 지정합니다. allowCredentials는 인증 정보를 포함하도록 허용할지 여부를 설정합니다.

React에서 CORS 처리하기

React에서는 CORS 문제를 해결하기 위해 fetch나 axios 등을 사용하여 서버와의 통신을 하게 됩니다. 이때 CORS 이슈를 해결하기 위해 요청 헤더에 Access-Control-Allow-Origin 값을 추가해야 합니다.

fetch('http://example.com/api/data', {
    method: 'GET',
    headers: {
        'Content-Type': 'application/json',
        'Access-Control-Allow-Origin': 'http://localhost:8080'
    }
})

위의 코드에서 Access-Control-Allow-Origin 헤더에는 서버의 도메인을 지정합니다.

마치며

스프링과 React를 함께 사용할 때 CORS 문제가 발생한다면, 각각의 환경에 맞게 CORS 설정을 해주어야 합니다. 이를 통해 서버와 클라이언트 간의 안전한 통신을 보장할 수 있습니다.

참고문헌

© 2018 Colin. All rights reserved.