Cross Site Origin 에러 해결하기 ( has been blocked by CORS policy: )

프로젝트에 쓰기 위해서 Vue js 공부하던 중에 

 

axios로 post 요청을 날렸는데 해당 에러가 발생하였다.  

 

이 문제의 해결 방법은 2가지가 존재한다. 

 

1. 스프링부트에서 해결하기 WebMvcConfigurer 에서 

addCorsMappings 메소드를 오버라이딩 해서 사용해주면 된다. 

 

사용법은  컨트롤러에 어노테이션을 붙이면 된다고 나와있다. 

@CrossOrigin이라는 어노테이션이다. 

 

 

위와 같이 작성하면 localhost:8080 포트에서 나오는 모든 요청을 CORS 예외 처리를 받을 수 있다.

 

 

2. Vue js의 vite.config.js에서 proxy 설정을 통해서 

해결할 수 있다.