CORS Issue 해결

귀찮Lee·2022년 8월 28일

Error Handling Log

목록 보기

4/8

정리된 내용
- https://velog.io/@gwichanlee/Cookie-Session#%E2%97%8E-cookie-options
- 위 글에서 Cookie Options > Same Site 부분 참고
CORS
- 추가 HTTP 헤더를 사용하여, 한 출처에서 실행 중인 웹 애플리케이션이 다른 출처의 선택한 자원에 접근할 수 있는 권한을 부여하도록 브라우저에 알려주는 체제
- 기본적으로 Domain이 다른 곳에서 요청을 한다면, 거절하는 것이 Default 값이다.
- 따라서 도메인이 다른 곳에서 요청을 하게 된다면 서버에서 CORS 설정을 해주어야 한다.

◎ 문제 상황

AWS EC2에 서버를 띄워놓은 상황
- Postman으로는 정상적으로 JSON 정보를 반환
- React(Javascript)를 이용해서는 데이터를 받을 수 없음

◎ 해결 방법

발생 원인
- Server에서 따로 CORS 설정을 해준 적이 없음.
- React(FrontEnd) 에서는 내가 쓰는 도메인과 다른 도메인을 사용하여 호출
- 다른 도메인에서 요청하는 것은 기본적으로 거절하기 때문에 React(FrontEnd) 개발환경에서 데이터를 확인할 수 없음.

해결 방법

CORS 설정을 해주면 됨

@Configuration
public class CorsConfig implements WebMvcConfigurer {

    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                .allowedOrigins("*") // (일단 개발 환경에서는) 모든 Domain(Origin)에 대해 요청 허용
                .allowedMethods("GET", "POST", "PUT", "PATCH", "OPTIONS")  // 모든 HTTP Method 종류에 대해
                .allowedHeaders("headers")
                .maxAge(3000);
    }
}

Spring Security를 사용한다면, 따로 설정을 해주어야 함

    @Bean
    public SecurityFilterChain filterChain(HttpSecurity http) throws Exception {

        http.
        ...
        .and().cors()
        ...
    }

    @Bean
    public CorsConfigurationSource corsConfigurationSource() {
        CorsConfiguration configuration = new CorsConfiguration();

        configuration.setAllowedOriginPatterns(Arrays.asList("*"));
        configuration.setAllowedMethods(Arrays.asList("HEAD","POST","GET","DELETE","PUT"));
        configuration.setAllowedHeaders(Arrays.asList("*"));
        configuration.setAllowCredentials(true);

        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        source.registerCorsConfiguration("/**", configuration);
        return source;
    }