[Spring Boot] CORS 설정하기

CORS란?

(Cross-Origin Resource Sharing,CORS) 란 다른 출처의 자원을 공유할 수 있도록 설정하는 권한 체제를 말합니다.

따라서 CORS를 설정해주지 않거나 제대로 설정하지 않은 경우, 원하는대로 리소스를 공유하지 못하게 됩니다.

위의 사진처럼 CORS에러가 발생하게 됩니다.

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

---

Configuration으로 해결하기

이 방법은 Global하게 적용하는 방법입니다.

우선 config패키지를 만들어 줍니다. 경로는 /src/main/java/{project}/config 

만들어진 config패키지 안에 WebConfig클래스를 만들어줍니다.

@Configuration
public class WebConfig implements WebMvcConfigurer {
}

클래스 상단에 @Configuration 어노테이션을 통해 설정파일이라는 것을 알려줍니다.

그리고 WebMvcConfigurer를 implements합니다.

@Configuration
public class WebConfig implements WebMvcConfigurer {
    @Override
    public void addCorsMappings(CorsRegistry registry) {
    }
}

addCorsMappings메소드를 오버라이드 합니다.

---

addMapping

@Configuration
public class WebConfig implements WebMvcConfigurer {
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**");
    }
}

registry.addMapping을 이용해서 CORS를 적용할 URL패턴을 정의할 수 있습니다.

위 처럼 "/**" 와일드 카드를 사용할 수도 있습니다. 

또한 Ant-style도 지원하며 "/somePath/**" 이렇게 적용할 수도 있습니다.

Default값은 아래와 같습니다.

• Allow all origins.
• Allow "simple" methods GET, HEAD and POST.
• Allow all headers.
• Set max age to 1800 seconds (30 minutes).

---

allowedOrigins

@Configuration
public class WebConfig implements WebMvcConfigurer {
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                .allowedOrigins("*");
}

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

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

@Configuration
public class WebConfig implements WebMvcConfigurer {
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                .allowedOrigins("http://localhost:8080", "http://localhost:8081");
    }
}

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

---

allowedMethods

@Configuration
public class WebConfig implements WebMvcConfigurer {
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                .allowedOrigins("*")
                .allowedMethods("GET", "POST");
}

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

위 처럼 여러개를 지정할 수 있고 마찬가지로 "*"를 이용하여 모든 method를 허용할 수 있습니다.

---

maxAge

@Configuration
public class WebConfig implements WebMvcConfigurer {
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                .allowedOrigins("*")
                .allowedMethods("GET", "POST")
                .maxAge(3000);
}

 

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

---

Annotation이용하기

두번째 방법은 Controller 또는 메소드단에서 annotation을 통해 적용하는 방법입니다.

@RequestMapping("/somePath")
@CrossOrigin(origins = "*", allowedHeaders = "*")
public class SomeController {
}

위처럼 CrossOrigin이라는 어노테이션을 사용하면, global하게 설정하던것과 같이 허용할 origins이나 methods를 지정할 수 있습니다.

origins, methods, maxAge, allowedHeaders를 사용하시면 됩니다.

@RestController
@RequestMapping("/somePath")
public class SomeController {

    @CrossOrigin(origins="*")
    @RequestMapping(value = "/{something}",method = RequestMethod.DELETE)
    public ResponseEntity<String> delete(@PathVariable Long reservationNo) throws Exception{
    }

}

또한 메소드에 적용되게 할 수 있습니다.