CORS Issue 해결

귀찮Lee·2022년 8월 28일
0

Error Handling Log

목록 보기
4/8
post-custom-banner

◎ CORS (Cross-Origin Resource Sharing)

  • 정리된 내용

  • 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;
        }
    

◎ 참고 자료

profile
배운 것은 기록하자! / 오류 지적은 언제나 환영!
post-custom-banner

0개의 댓글