스프링부트 CORS 적용하기

클라이언트에서 api 호출시 다음과 같은 에러가 날때가 있다.

Access to fetch at 'http://localhost:8080/api/v1/hello' 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.

 

이오류에 대해서는 다음을 참조하자

developer.mozilla.org/ko/docs/Web/HTTP/CORS

교차 출처 리소스 공유 (CORS) - HTTP | MDN

이런 오류가 날때 다음과 같이 bean을 설정하면 CORS를 오류없이 클라이언트에서 api를 호출 할수 있게 된다.

    @Bean
    public WebMvcConfigurer corsConfigurer(){
        return new WebMvcConfigurer() {
            @Override
            public void addCorsMappings(CorsRegistry registry) {
                registry.addMapping("/**").allowedOrigins("http://localhost:3000");
            }
        };
    }