CORS 정책?

리액트 앱과 REST API를 연결중,
리액트 앱의 요청이 CORS 정책에 의해 차단되었다는 경고가 나온다.

일반적으로 node.js 프로젝트는 3000포트를 사용하고, 스프링은 8080포트를 사용하는데 localhost:3000 -> localhost:8080의 요청은 이론상 다른 웹사이트에서 보내는 요청이므로 기본값으로 CORS 정책이 적용되어 차단이 되는 것이다.

이러한 정책을 어떻게 피해서 프론트와 백이 통신할 수 있을까?

localhost:3000 -> localhost:8080
위와 같은 형태의 요청을 크로스 오리진 리퀘스트(CORS)라고 한다.

우리는 지정된 웹사이트(필자의 경우 localhost:3000)의 요청만 허용하도록 하는 코드를 작성할 것이다.
그것은 @SpringBootApplication으로 지정된 클래스에서 정의하도록 하겠다

@SpringBootApplication
public class RestfulWebServicesApplication {
	public static void main(String[] args) {
    	SpringApplication.run(RestfulWebServicesApplication.class, args);
        
    // WebMvcConfigurer에서 CORS 관련 요소들을 설정 가능
    @Bean
    public WebMvcConfigurer corsConfigurer() {
    	return new WebMvcConfigurer() {
        	public void addCorsMapping(CorsRegistry registry) {
            	registry.addMapping("/**")	// 요청 경로 허용 (/users, /posts, ...)
                	.allowedMethods("*")	// 요청 메소드 혀용 (GET, POST...)
                    .allowedOrigins("http://localhost:3000") // 요청 웹사이트 허용
            }
        }
    };
}

이제 localhost:3000의 모든 요청이 허용된다!