Axios와 Spring Boot 통신 시 CORS 문제 해결하기

 

 웹 개발을 하다 보면 프론트엔드와 백엔드 간의 통신에서 CORS(Cross-Origin Resource Sharing) 문제를 자주 마주하게 됨. 특히 Axios를 사용해 Spring Boot 서버와 통신할 때, CORS 설정이 올바르지 않으면 요청이 차단되곤 함.

CORS란 무엇인가?

CORS는 웹 브라우저에서 서로 다른 출처 간의 리소스 요청을 제어하는 보안 기능임. 기본적으로 브라우저는 다른 출처의 리소스에 대한 요청을 제한함으로써, 악의적인 사이트에서 사용자의 정보를 탈취하는 것을 방지함. 하지만 개발 중에는 이 제한이 불편할 수 있음.

CORS 문제 발생 원인

Axios를 통해 Spring Boot 서버에 요청을 보낼 때, Authorization과 같은 사용자 정의 헤더를 포함하면 브라우저는 프리플라이트 요청(OPTIONS)을 먼저 보냄. 이 요청에 대해 서버가 올바른 CORS 응답을 하지 않으면 CORS 에러가 발생함.

CORS 문제 해결하기

1. Spring Boot에서 CORS 설정하기

Spring Boot에서 CORS를 설정하는 방법은 여러 가지가 있음. 가장 일반적인 방법은 WebMvcConfigurer를 구현하는 것임. 아래는 CORS를 허용하는 기본적인 설정 예시임.

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;

@Configuration
public class WebConfig implements WebMvcConfigurer {
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**") // 모든 경로에 대해 CORS 허용
                .allowedOrigins("http://localhost:3000") // 클라이언트 출처 설정
                .allowedMethods("GET", "POST", "OPTIONS") // 허용할 HTTP 메소드
                .allowedHeaders("*") // 허용할 헤더
                .allowCredentials(true); // 인증 정보 포함 허용
    }
}

 

2. OPTIONS 요청 처리하기

서버가 OPTIONS 요청을 수신할 때, CORS 관련 헤더를 포함한 응답을 제공해야 함. 이를 통해 클라이언트는 실제 요청을 안전하게 보낼 수 있음.

3. Axios 요청 확인하기

Axios 요청 시, 다음과 같이 Authorization 헤더를 포함하여 요청을 보내는 것이 일반적임.

function request(url, config = {}) {
    const authToken = getAuthToken();
    url = url.startsWith('/') ? getAPIURL() + url : url;
    return axios.get(url, {
            params: {},
            headers: {
                Authorization: `Bearer ${authToken}`
            }
        }
    );
}

4. 서버 로그 및 콘솔 확인하기

CORS 문제를 해결하기 위해서는 서버 로그와 브라우저의 개발자 도구 콘솔을 확인하는 것이 중요함. CORS 에러 메시지에는 어떤 헤더가 허용되지 않는지, 어떤 출처가 차단되었는지 등의 정보가 포함되어 있음. 이 정보를 바탕으로 설정을 수정할 수 있음.

5. 로컬 개발 환경에서의 프록시 설정

개발 중에 CORS 문제를 피하기 위해 프록시 서버를 사용할 수도 있음. 예를 들어, React 애플리케이션에서는 package.json에 프록시 설정을 추가하여 CORS 문제를 우회할 수 있음.

 

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

결론

CORS 문제는 웹 개발에서 흔히 발생하는 이슈지만, 올바른 설정을 통해 쉽게 해결할 수 있음. Axios와 Spring Boot 간의 통신에서 CORS 문제를 해결하기 위해서는 서버의 CORS 설정을 확인하고, 필요한 경우 클라이언트 요청을 수정하는 것이 중요함.

 

++

위에 것들을 다 해도 뭔가 잘안되는거 같다?

혹시 본인이  AuthWebConfig 식으로 implements WebMvcConfigurer 를 상속 받아서, 토큰이 없는 경우 에러를 뱉는 로직을 작성했다면, 해결되지 않을수 있다.

OPTIONS 통신으로 먼저 통신요청시에는 해당 토큰이 들어가지 않는다.

토큰이 없으니 당연히 에러를 뱉지만, 리엑트 서버측에서는 프리플라이트(OPTIONS)통신에서는 에러임으로 통신이 멈추게된다.

그러므로 OPTIONS통신의 경우 정상적으로 통과 처리해줘야한다.

 

본인은 화이트리스트와 옵션의 경우 일단 통과시켜주는 식으로 구성하였다.

 

 

 

---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ----

요약 정리

1. cors 는 통신하는 두 지점이 도메인이나 포트가 다른경우 ajax 및 axio를 통한 클라이언트 - 서버 통신의 경우 발생한다.

2. react의 클라이언트 통신의 요청시, header에 사용자 정의 필드가 존재하는 경우 프리플라이트 통신을 선행한다. 이때, OPTIONS method 통신이 원활하게 되어야하는데, OPTIONS method를 기본적으로 막아눈 경우 에러가 난다. 

혹은, 무지성으로 토큰이 있는지 없는지로 검사하는 경우에도 에러가 난다.

3. 서버에서 CORS 환경설정을하거나, 클라이언트에서 proxy 작업을 하거나,  둘중에 하나라도 하면 된다.