[Vue] Spring boot 연동시 cors 에러 해결

1. axios로 Spring boot연동시 아래 그림처럼 cors 에러가 났다!

위 그림처럼 에러가 날 경우 필자는 이렇게 해결했다.

 

2. Vue의 메인 폴더(package.json이 있는 곳!)에 vue.config.js를 만들고 아래 코드를 입력

module.exports = {
    devServer: {
        proxy: {
            '/':{
                "target":'http://localhost:8883', // Spring boot의 주소 및 포트
                "pathRewrite":{'^/':''},
                "changeOrigin":true,
            }
        }
    }
}

3. Spring boot에서 class하나를 만들어서 아래 코드를 작성

@Configuration
public class WebConfig implements WebMvcConfigurer {
	
	@Override
	public void addCorsMappings(CorsRegistry registry) {
		registry.addMapping("/**")
				.allowedOrigins("*")
				.allowedMethods("GET", "POST")
				.maxAge(3000);
		
//		addMapping - CORS를 적용할 url의 패턴을 정의 (/** 로 모든 패턴을 가능하게 함)
//		allowedOrigins - 허용할 origin을 정의 (* 로 모든 origin을 허용, 여러개도 지정가능)
//		allowedMethods - HTTP Method를 지정 (* 로 모든 Method를 허용)
//		maxAge - 원하는 시간만큼 request를 cashing함
	}
}

4. 이제 다시 요청해보니 cors에러 없이 결과값이 나온다!!