Access to XMLHttpRequest at '주소A' from origin '주소B' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

• Spring 톰캣과 Vue.js dev 서버를 따로 띄워놓고 개발하다가 주소B(Vue.js 포트)로부터 주소A(Spring 포트)에 요청시 발생
• Same Origin / Cross Origin Policy 때문에 보안상 다른 Origin에 요청한 것들은 기본적으로 차단된다.
• 그렇기 때문에 CORS(Cross Origin Resource Sharing)라는 것이 있으며, 다른 Origin의 데이터를 읽고 싶다면 CORS 표준을 지켜서 응답에 허용해달라고 알려줘야 한다.
• 응답하는 서버 쪽에 허용할 Origin을 Access-Control-Allow-Origin 응답 헤더에 넣어주면 되나 Spring의 경우 설정 파일에 추가 설정을 해주면 된다.
  • "Access-Control-Allow-Origin": 사이트명
  • 모든 사이트를 허용하는 경우에는 사이트명 대신에 *를 넣지만 개인적인 개발 공부에만 사용할 것!
  • 설정 방법은 아래 링크를 참고하자

[Spring Boot] CORS 설정하기

• 참고로 Spring 안에 빌드한 Vue.js 결과물을 포함한 채로 톰캣 서버 단독으로 실행할 때는 위의 설정이 필요 없다.
• Vue.js에 프록시 설정을 해줬을 때도 마찬가지로 할 필요 없는 설정이다.
• Spring과 Vue.js 포트를 따로 띄우고 개발할 때만 할 것!