CORS(Cross-Origin Resource Sharing)란 웹 브라우저에서 다른 출처(origin)의 리소스를 요청할 수 있도록 하는 메커니즘입니다.

CORS 설정을 해주지 않으면 CORS 에러가 발생하게 됩니다.

이를 Spring Boot 에서 설정을 통해 해결하는 방법에 대해 알아보겠습니다.

1. 전역 설정

이 방법은 Global 설정을 적용하는 방법입니다.
프로젝트 하단에 config 패키지를 만들고 WebConfig 클래스를 만듭니다.

@Configuration
public class WebConfig implements WebMvcConfigurer {
	...
}

이 때 클래스 상단에 @Configuration 어노테이션을 붙여서 설정 파일 이라는 것을 표시합니다.

@Configuration
public class WebConfig implements WebMvcConfigurer {

	@Override
    public void addCorsMappings(CorsRegistry registry) {
		...
    }
}

인터페이스 WebMvcConfigurer를 구현하고 addCorsMappings() 메소드를 오버라이딩 합니다.

@Configuration
public class WebConfig implements WebMvcConfigurer {

    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                .allowedOrigins("*")
                .allowedMethods("GET", "POST", "PUT", "DELETE")
                .allowedHeaders("Authorization", "Content-Type")
                .exposedHeaders("Custom-Header")
                .allowCredentials(true)
                .maxAge(3600);
    }
}

1) addMapping

addMapping을 사용해 CORS를 적용할 URL 패턴을 정의합니다.
위 처럼 "/**" 와일드 카드를 사용할 수도 있고 "/somePath/**" 이렇게 적용할 수도 있습니다.

2) allowedOrigins

allowedOrigins를 이용해서 자원 공유를 허락할 Origin을 지정할 수 있습니다.

위 처럼 "*"로 모든 Origin을 허락할 수 있습니다.

.allowedOrigins("http://localhost:8080", "http://localhost:8081");

이렇게 한번에 여러 Origin을 설정할 수도 있습니다.

3) allowedMethods

allowedMethods를 이용해서 위 처럼 허용할 HTTP method를 지정할 수 있습니다.

이 때 "*"를 사용해 모든 method를 허용할 수도 있습니다.

4) allowedHeaders

allowedHeaders를 이용해 클라이언트 측의 CORS 요청에 허용되는 헤더를 지정합니다.

기본적으로 Content-Type, Accept 및 Origin과 같은 간단한 요청 헤더만 허용됩니다.

5) exposedHeaders

exposedHeaders를 이용해 클라이언트측 응답에서 노출되는 헤더를 지정합니다.

6) allowCredentials

allowCredentials를 이용해 클라이언트 측에 대한 응답에 credentials(예: 쿠키, 인증 헤더)를 포함할 수 있는지 여부를 지정합니다.

기본값은 false로 되어있습니다.
true로 설정하면 클라이언트가 요청에 credentials를 포함하고 응답에서 받을 수 있습니다.

credentials를 사용할 때 응답의 Access-Control-Allow-Origin 헤더가 *로 설정되지 않았는지 확인해야 합니다. 요청 원본과 명시적으로 일치해야 합니다.

7) maxAge

maxAge를 이용해서 원하는 시간만큼 pre-flight 리퀘스트를 캐싱 해둘 수 있습니다.

2. Controller 설정

Controller 또는 Controller의 메소드에 annotation을 통해 적용하는 방법입니다.

1) Controller class에 설정

@RequestMapping("/articles")
@CrossOrigin(origins = "*", allowedHeaders = "*")
public class ArticleController {
	...
}

위처럼 설정하면 해당 controller에 허용할 Origin이나 methods를 설정할 수 있습니다.

2) method에 설정

@RestController
@RequestMapping("/articles")
public class ArticleController {

    @CrossOrigin(origins="*")
    @DeleteMapping(value = "/{articleId}")
    public ResponseEntity<ArticleResponseDto> delete(@PathVariable Long articleId) throws Exception{
    	...
    }

}

위와 같이 메소드에도 적용할 수 있습니다.

참고

참고
https://dev-pengun.tistory.com/entry/Spring-Boot-CORS-%EC%84%A4%EC%A0%95%ED%95%98%EA%B8%B0