안녕하세요. 엔지엠소프트웨어입니다. 웹프로젝트를 진행하면서 Backend는 Spring boot를 사용하고, Frontend는 React+TypeScript를 사용했습니다. Backend에서 SpringSecurity를 설정해주면 CORS(Cross-Origin Resource Sharing) 문제가 발생하지 않는데요. 기본적인 설정으로 서버를 실행하고, RESTful API를 호출하면 Frontend 콘솔(Console)창에 CORS 에러를 보게 됩니다. 그러면 이 문제를 어떻게 해결해야 할까요? Backend에서 처리해도 되고, Frontend에서 프록시를 설정해서 해결해도 됩니다.

 

1. Spring 서버에서 CORS 허용 설정 추가
Spring 서버의 API 요청에 대해 CORS를 허용하도록 설정해야합니다. 이를 위해 Spring Security를 사용하는 경우 다음과 같이 코드를 추가할 수 있습니다.

@Configuration
@EnableWebSecurity
public class WebSecurityConfig extends WebSecurityConfigurerAdapter {

    @Override
    protected void configure(HttpSecurity http) throws Exception {
        http.cors().and().csrf().disable();
    }

    @Bean
    public CorsConfigurationSource corsConfigurationSource() {
        CorsConfiguration configuration = new CorsConfiguration();
        configuration.addAllowedOrigin("*");
        configuration.addAllowedMethod("*");
        configuration.addAllowedHeader("*");
        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        source.registerCorsConfiguration("/**", configuration);
        return source;
    }
}

 

이 코드는 모든 출처에서의 요청에 대해 허용하며, 모든 메소드와 헤더를 허용합니다.

 

2. React에서 Proxy 설정 추가
React에서 프록시를 설정하여 Spring 서버에 API 요청을 보낼 수 있도록 해야합니다. 이를 위해 package.json 파일에 다음 코드를 추가합니다.

"proxy": "http://localhost:8080"

 

위 코드는 모든 API 요청을 http://localhost:8080 주소로 프록시합니다.

 

3. API 요청 시 withCredentials 설정 추가
React에서 API 요청을 보낼 때, withCredentials 옵션을 추가하여 인증 정보를 함께 보낼 수 있도록 해야합니다. 이를 위해 다음과 같이 코드를 작성합니다.

axios.get('http://localhost:8080/api', { withCredentials: true })
  .then(response => {
    // API 요청 결과 처리
  })
  .catch(error => {
    // 에러 처리
  });

 

위 코드에서 withCredentials: true 옵션을 추가하여 인증 정보를 함께 보냅니다.

위와 같은 방법을 통해 React와 Spring을 함께 사용하면서 CORS 에러를 해결할 수 있습니다.

 

개발자에게 후원하기

 

추천, 구독, 홍보 꼭~ 부탁드립니다.

여러분의 후원이 빠른 귀농을 가능하게 해줍니다~ 답답한 도시를 벗어나 귀농하고 싶은 개발자~

감사합니다~

추천0 비추천0