CORS

CORS란?

Cross-Origin Resource Sharing Policy의 약어로 다른 출처에 대한 요청 처리에 대한 정책과 관련된 개념이다. 일반적으로 다른 출처에 대한 요청을 금지하고 있고 여기서 말하는 동일한 출처란 도메인과 포트번호가 똑같은 경우일 때를 의미해서 도메인이 같아도 포트번호가 다른 요청에 대해서는 금지하고 있다. 이러한 문제 상황은 리액트와 웹서버의 포트번호가 기본적으로 다르기 때문에 리액트를 통한 프론트엔드와 스프링을 통한 백엔드 작업을 진행할 때 기본적인 cors diable을 하지 않게 된다면 다음과 같은 메세지를 크롬 개발자 콘솔창에서 확인할 수 있다.

Access to XMLHttpRequest at 
'http://localhost:8080/api/v1/...' from origin 
'http://localhost:3000' has been blocked by CORS policy:
No 'Access-Control-Allow-Origin' header is present on
the requested resource.

해결방법

Global하게 허용시키고 싶은 경우 WebMvcConfigurer를 구현한 클래스에서 addCorsMappings 메소드를 오버라이딩해서 cors를 허용하도록 한다.

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

다음과 같이 컨트롤러나 특정 핸들러에 대해서 아노테이션 형태로 cors 설정도 가능하다.

@RestController
@RequestMapping("/account")
public class AccountController {
    @CrossOrigin
    @RequestMapping(method = RequestMethod.GET, path = "/{id}")
    public Account retrieve(@PathVariable Long id) {
        ...
    }
}

@CrossOrigin(origins = "http://example.com", maxAge = 3600)
@RestController
@RequestMapping("/account")
public class AccountController {
    ...
}

@CrossOrigin(maxAge = 3600)
@RestController
@RequestMapping("/account")
public class AccountController {

    @CrossOrigin("http://example.com")
    @RequestMapping(method = RequestMethod.GET, "/{id}")
    public Account retrieve(@PathVariable Long id) {
        ...
    }
}

---

CORS 설정하기
CORS