[CORS Error] Cross-Origin Resource Sharing 에러

리액트에서 fetch() 를 이용한 데이터를 요청하는 도중 오류가 발생했다.

 

CORS

교차 출처 리소스 공유 (Cross-Origin Resource Sharing, CORS)는 브라우저가 자신의 출처가 아닌 다른 어떤 출처
(도메인, 스킴 혹은 포트)로부터 자원을 로딩하는 것을 허용하도록 서버가 허가 해주는 HTTP 헤더 기반 메커니즘.

 

 

보안 상의 이유로 브라우저는 스크립트에서 시작한 교차 출처 HTTP 요청을 제한한다.
예를 들어, fetch() 와 XMLHttpRequest 는 동일 출처 정책을 따른다. 이는 이러한 API를 사용하는 웹 애플리케이션이 애플리케이션이 로드된 동일한 출처에서만 리소스를 요청할 수 있으며, 다른 출처의 응답에 올바른 CORS 헤더가 포함되어 있지 않는 한 오류가 발생할 수 있다.

 

CORS 에러 해결법

백엔드 프로젝트 내에 WebCofig 파일을 생성하고 작성해주자.

스프링 서버 전역적으로 CORS 설정을 해주기 위해 @Cofiguration 어노테이션을 사용한다.

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

/*
 * 전역적 CORS 설정
 */
@Configuration
public class WebConfig implements WebMvcConfigurer {
	
	@Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                .allowedOriginPatterns("*") // 허용할 출처 : 특정 도메인만 받을 수 있음
                .allowedMethods("GET", "POST") // 허용할 HTTP method
                .allowCredentials(true); // 쿠키 인증 요청 허용
    }

}

 

 

재실행 후 정상적으로 요청되는 것을 확인할 수 있다!