Access to fetch at 'http://localhost:8080' from origin 'http://localhost:3000' has been blocked by CORS policy

에러가 난 이유.

CORS(Cross-Origin Resource Sharing) 문제로 인한 에러.

CORS란
 - CORS는 브라우저에서 다른 출처(Origin)의 리소스를 요청할 때 발생할 수 있는 보안 정책.

 

문제의 원인.

React 개발 서버(http://localhost:3000)에서 Spring Boot 서버(http://localhost:8080)로 API 요청을 보냈지만 Spring Boot 서버가 CORS 요청을 허용하지 않아 브라우저의 요청을 차단한 상황.

 

해결 방법.

Spring Boot에서 CORS 허용 설정을 아래와 같이 해결해주면 된다.

@Configuration
public class WebConfig implements WebMvcConfigurer {

    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**") // 모든 경로에 대해
                .allowedOrigins("http://localhost:3000") // React 개발 서버
                .allowedMethods("GET", "POST", "PUT", "DELETE", "OPTIONS") // 허용할 HTTP 메서드
                .allowCredentials(true);
    }
}