spring, react 사용 CORS 오류 조치

발단

개인 프로젝트 진행 중 백엔드 API 서버 완성 후 프론트 프로젝트를 React를 통하여 구현 중이었음.
POSTMAN 툴을 사용하여 백엔드 API 서버를 호출하였을 때 결과는 의도한대로 동작하는 것을 확인하였음.
React에서 axios 라이브러리를 활용하여 백엔드 API 서버를 호출하는 과정에서 결과가 넘어오지 않는 상황이 발생하였음.
콘솔창을 확인한 결과 CORS 에러가 발생하고 있었음.
두 부분에 걸쳐서 해당 이슈를 조치하였음.

 

작업 구성

- 프론트서버 : http://localhost:3000
- 백엔드서버(apigateway의 역할) : http://localhost:5555

---

원인 분석 및 조치

CORS란?
Cross-Origin Resource Sharing의 약자로 교차 출처 리소스 공유를 의미.
브라우저에서 서로 다른 출처 간에 자원에 접근할 수 있는 권한을 제어하는 정책으로 여기서 출처는 url이며 도메인, 프로토콜, 포트로 구분합니다.

 

첫 번째 콘솔에러메시지

Access to fetch at ‘https://localhost:5555/user/signup’ from origin ‘http://localhost:3000’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.
If an opaque response serves your needs, set the request’s mode to ‘no-cors’ to fetch the resource with CORS disabled.

 

첫 번째 오류분석
요청한 출처는 서버에서 허용되지 않은 출처이기 때문에 발생한 에러로 필자의 경우는 백엔드서버(apigateway)에서 요청을 허용하도록 조치하였다.

 

조치 소스

//apigateway 서버는 WebFlux 프로젝트로 WebFluxConfigure 설정에서 추가
@Configuration
@EnableWebFlux
public class CorsGlobalConfiguration implements WebFluxConfigurer{

    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                .allowedOrigins("*") //테스트 환경이기에 모든 url을 허용하도록 "*" 기입
                .allowedMethods("*")
                .allowedHeaders("*")
                .maxAge(3600);
    }
}

---

두 번째 콘솔에러

OPTIONS http://localhost:5555/user/signup 401 (Unauthorized) Failed to load http://localhost:5555/user/signup: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.
Origin 'http://localhost:3000' is therefore not allowed access. The response had HTTP status code 401.
If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

두 번째 오류분석

첫 번째 오류에 대하여 조치를 하였지만 두 번째 에러가 발생하였다. 해당 에러는 요청 url에 대하여 preflight request 시에 권한이 없어서 401 코드를 응답한 상황이다.
확인 결과 호출한 url은 apigateway를 통하여 사용자 인증서버로 전달되며 해당 서버는 Spring Security에 의하여 요청을 인증 및 인가를 처리하는데 HttpMethod에 대하여 허용 여부를 설정하지 않아 기본 설정인 모든 요청에 대하여 제한이 된 상태임을 확인하였다. 따라서 인증서버의 Spring Security 설정 중 HttpMethod.OPTIONS에 대하여 권한을 허용하도록 설정을 변경하였다.

 

Preflight Request란?
서로 다른 출처 간에 요청을 보내야 하는 경우 브라우저 자체적으로 본 요청을 보내기 전에 예비요청을 보내어 안전한 요청인지 확인 후 본요청을 보내는 방법입니다. 이때 http OPTIONS 메소드를 사용합니다.

 

조치 소스

@Configuration
@EnableWebSecurity
public class WebSecurityConfig extends WebSecurityConfigurerAdapter{
@Override
    protected void configure(HttpSecurity http) throws Exception {
        http
        ...
        ...
        ...
        .mvcMatchers(HttpMethod.OPTIONS, "/**").permitAll()
        ...
        ...
        ...
    }
}