스프링부트 CORS 설정

[HTTP] - CORS 교차 출처 리소스 공유

CORS 교차 출처 리소스 공유

 

이전 글처럼 CORS에러가 발생했을 때  스프링에서 해결하는 방법.

 

 

1. Global 설정 추가

---

프로젝트 하위 폴더에 config 패키지 생성 -> WebConfig.java 파일 생성 후

//@Configuration은 설정파일을 만들기 위한 어노테이션입니다.
@Configuration
public class WebConfig implements WebMvcConfigurer {

}

클래스 상단에 @Configuration 어노테이션을 붙여주고,

WebMvcConfigurer 인터페이스를 이용해서  필요한 설정들을 커스터마이징 할 수 있습니다.

WebMvcConfigurer 인터페이스를 보면 내부에 많은 메서드들이 존재하는데 모두 default로 선언되어있어,

implements를 하여도 모든 메서드를 구현할 필요 없이 필요한 메서드만 커스터마이징 할 수 있습니다.

 

intercepter용 메서드들도 컨트롤할 수 있는데 그러기 위해서는 @EnableWebMvc, @Configuration을 같이 선언해주어야 합니다.

 

 

이제 WebMvcConfigurer 인터페이스를 상속받고 나서  addCorsMappings를 @Override해줍니다.

@Configuration
@EnableWebMvc
public class WebConfig implements WebMvcConfigurer {

    @Override
    public void addCorsMappings(CorsRegistry registry) {

        registry.addMapping("/api/**")
            .allowedOrigins("http://domain2.com")
            .allowedMethods("PUT", "DELETE")
            .allowedHeaders("header1", "header2", "header3")
            .exposedHeaders("header1", "header2")
            .allowCredentials(true)
            .maxAge(3600);

        // Add more mappings...
    }
}

기본 설정은 다음과 같습니다.

 

• All origins.
• All headers.
• GET, HEAD, and POST methods.
• allowedCredentials
  
• maxAge is set to 30 minutes.

 

1. addMapping
   CorsRegistry 콜백을 사용해서 addMapping에 CORS 설정을 적용할 URL 패턴을 정의할 수 있습니다.
   Ant-style을 지원해서 위 코드와 같은 방식과 "/**" 같은 와일드카드를 사용하여 작성이 가능합니다.
2. allowedOrigins
   allowedOrigin 메서드를 이용해서 자원 공유를 허락할 Origin을 지정할 수 있습니다.
   "*"로 모든 Origin을 허락할 수 도 있고 allowedOrigin("http://localhost:8080", "http://localhost:8081")처럼
   한 번에 여러 Origin을 설정할 수 있습니다.
   ※ origin이란 특정 페이지에 접근할 때 사용되는 URL의 Scheme(프로토콜), host(도메인), 포트를 말합니다.
   
3. allowedCredentials
   쿠키 및 CSRF 토큰과 같은 민감한 정보는 노출하는 신뢰 수준을 설정하고 적절한 경우에만 사용해야 하므로
   기본적으로 활성화돼 않습니다.
4. maxAge
   maxAge 메서드를 이용해서 원하는 시간만큼 pre-flight 리퀘스트를 캐싱해둘 수 있습니다.

 

 

 

2. Anotation 설정 @CrossOrigin

---

@CrossOrigin

@RestController
public class PostsController {

    private final PostsService postsService;

    public PostsController(PostsService postsService) {
            this.postsService = postsService;
    }
    
    @CrossOrigin
    @GetMapping(value = "/posts/list", produces = "application/json; charset=utf-8")
    public List<Posts> findAll() {
        return postsService.findAll();
    }
    
}

 

@CrossOrigin은 클래스 및 메서드 수준에서 모두 사용할 수 있습니다.

@CrossOrigin(origins = "http://localhost:8080", maxAge  = 3600)