앞서 우리는 backend는 springboot frontend는 vue.js로 설정하기 위하려 설치과정을 실행하였다.
이 환경에서 개발할때에는 backend 서버를 켜놓고, vue.js 개발용 서버를 켜서, 두 가지의 서버를 사용하여 개발을 한다.
그렇기 위해서는 backend 서버를 기본포트인 8080포트에서 8081포트로 변경하고, frontend에서는 proxy를 이용하여 frontend서버를 통하여 backend서버를 호출하도록 하여 CORS이슈를 최소화 하기위하여 설정하도록 하겠다.
#application.properties server.port=8081
그리고 추후에 개발환경과 서버에 배포할 환경을 만들기 위해 application.properties와 같은 경로에 config-default.properties 를 추가해주고 다음과 같이 변경해 준다.
//DemoApplication.java @SpringBootApplication @PropertySource(name="config", value="config-${spring.profiles.active:default}.properties") public class DemoApplication { public static void main(String[] args) { SpringApplication.run(DemoApplication.class, args); } }
CORS관련 설정 코드도 추가해 준다.
#config-default.properties cors.origin.url=http://localhost:8080 cors.base.url=http://localhost:8081
@Configuration public class WebConfig implements WebMvcConfigurer { @Value("${cors.origin.url}") private String originUrl; @Override public void addCorsMappings(CorsRegistry registry) { registry.addMapping("/**") .allowedMethods("*") .allowedOrigins(originUrl) .allowCredentials(true); } }
이로써 backend에서의 환경설정은 완료 되었고, frontend설정을 계속하겠다.