Spring Boot + Vue) 서버단에서 CORS 문제 해결하기

 개발 환경 

Vue3

Spring Boot 3.0.2

JAVA 17

 

Vue의 포트번호 : 3000

Spring의 포트번호 : 8080

 

 

Vue랑 Spring Boot를 처음으로 연동하여 공부를 하고 있는데 역시나 CORS에 부딪혔다. 

수많은 블로그에 추천은 하지 않지만 프론트 단에서만 해결할 수도 있다고 하는데

아무리 Proxy를 설정해도 해결되지 않았다. 

결국 프론트단의 proxy설정과 백엔드단의 설정이 둘다 필요했다. 

 

 

 Vue 

webpack.config.js

module.exports = {

  devServer : {
    proxy : {
      '/api' : {
        target:'http://localhost:8080',
        pathRewrite:{'^/api':''},
      }
    }
  },

};

target : 위 내용은 /api로 시작하는 요청은 8080포트로 보냄

pathRewrite : /api로 시작하는 요청 URL에서 /api를 없앤다. 

 

이게 개발환경에서는 된다고 하지만 나는 되지 않았고 결국 서버단에서 설정했다. 

어차피 실 운영을 하려면 서버단에서 설정해야한다. 

 

 

 

 Spring Boot 

config 패키지를 새로 만들고 그 안에 WebConfig class를 생성한다. 

package com.learnfstep.config;

import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;

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

이렇게 하니 CORS 문제가 해결되었다.