CORS(Cross-Origin Resource Sharing)는 웹 브라우저에서 특정 사이트(A.com) 로부터 다른 사이트(B.com) 로의 요청 및 접근을 가능하게 하는 프로토콜이다. 보안 상 최신 브라우저는 기본적으로 타 사이트로의 요청을 제한하고 있다. SPA 프레임워크의 사용 등으로 frontend 와 backend 의 분리가 일반적이 된 요즘, 서버로의 API 요청시 프로토콜/도메인/포트 등이 다르다면, CORS 설정이 올바르지 않다면 브라우저 콘솔에서 관련 error 를 마주하게 된다.

기본적인 CORS 요청들을 단순(simple) 요청이라 할 때, application/json 타입의 요청이거나 커스텀 헤더를 전송하는 등의 요청은 사전(preflight) 요청이라고 한다. 이 경우는 웹 브라우저에서 OPTIONS 메소드로 preflight(사전전달) 요청이 먼저 수행하고, 서버에서 허용 범주를 응답 받은 후에 실제 GET/POST 등의 요청을 보내게 된다.

CORS 서버 설정

서버 개발자는 요청을 허용할 범주(Access-Control-Allow-* header/method/origin) 를 설정하여 응답 헤더에 보낼 수 있도록 세팅하면 된다. Spring Boot 의 경우, WebMvcConfigurer 를 구현하고 addCorsMappings 메소드를 오버라이드 하여 아래와 같이 설정할 수 있다.

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

exposedHeaders 메소드의 경우 브라우저에서 클라이언트가 접근 가능한 응답 헤더 목록을 설정한다. (Authorization 은 token 등을 이용할 때 많이 사용) cors mapping 만 설정했을 때는 GET, HEAD, POST 의 메소드에 대해서, 모든 출처의 요청에 대해 허용하는 것이 기본값이다. 위와 같이 Spring 에서 설정했을 경우, 아래와 같은 응답 헤더를 보내주고 CORS 는 성공하게 된다.

컨트롤러, 메소드 단위에서 @CrossOrigin 어노테이션을 사용할 수도 있다.

또한, Spring Security 를 사용중이라면 아래와 유사한 방식으로 cors 요청을 처리할 수 있다.

@EnableWebSecurity
public class WebSecurityConfig extends WebSecurityConfigurerAdapter {
    @Override
    protected void configure(HttpSecurity http) throws Exception {
        http.authorizeRequests()
            .and()
            .cors()
            .and()...
    }

    @Bean
    public CorsConfigurationSource corsConfigurationSource() {
        CorsConfiguration configuration = new CorsConfiguration();

        configuration.addAllowedOrigin("http://localhost:3000");
        configuration.addAllowedHeader("*");
        configuration.addAllowedMethod("*");
        configuration.setAllowCredentials(true);

        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        source.registerCorsConfiguration("/**", configuration);
        return source;
    }
}

Vue.js 란 무엇인가?

프론트엔드 개발자가 익혀야 하는 범주에 들어가는 SPA(Single-page application) 프레임워크 중 하나이다. SPA 는 프레임워크만의 기술로 렌더링하여 한번에 웹페이지 전체를 로드하는 방식으로, 이미 웹프론트 개발에 자리 잡은지 오래다. 이런 멋진 SPA 사이트를 만들기 위해서는 VueJS 나 ReactJS, AngularJS 중 하나를 학습하면 된다.

Vue.js 를 사용하는 이유?

Vue 는 Angular 나 React 에 비해 코드가 간결하고 자바스크립트를 덜 몰라도 개발하는데 문제가 없다고는 하는데... 그리고 HTML 렌더링하는 시간이 아주 쬐끔 더 빠르다고 한다. 개인적으로는 프론트 개발자는 아니지만 잠시 해야할 필요가 있다면 Vue, 프론트 개발자이면서 전문성을 높여야 한다면 React 를 배우는 것이 낫지않나 싶다.

Vue 사용법

스크립트로 vue.js 를 불러오고, js 에서 Vue 인스턴스를 이용하여 DOM 의 데이터를 렌더링하는 가벼운 예제이다.

<script src="https://unpkg.com/vue@next"></script>

<div id="counter">
  Counter: {{ counter }}
</div>

<script>
const Counter = {
  data() {
    return {
      counter: 0
    }
  }
}

Vue.createApp(Counter).mount('#counter')
</script>

Vue 개발 환경

아마도 프레임워크를 저런식(?)으로 호출해서 사용할 일은 없을 것이고, VS code 나 WebStorm 정도의 IDE 를 사용해서 효율적으로 Vue 를 시작하게 될 것이다. 또한 npm 이나 yarn 같은 자바스크립트 패키지 관리 툴도 필요하다.