⚠️ 문제 발생! 분명 axio도 설치 했고, API도 만들었고, router 기능도 넣어줬는데, 왜 Back End 와 Front End는 만나지 못하고, 이러고 있을까요? 🤔 원인 분석 곰곰히 생각 해보니 주니하랑은 또 하나를 빠뜨린 것이에요. 바로 Vue에 URL 설정을 하지 않은 것이에요. axios에 Back End URI는 설정 해 놓고, 정작 접두사를 빼 먹었으니 당연히 Front End는 '그래서 어디로 가라는 거지?'를 하고 있는 것이에요. 일단 근본적인 원인을 찾기 위해 API 쪽에 하드코딩을 해보기로 한 것이에요. 이렇게 해 주니 Front가 Back End를 만나러 가긴 했는데, Back End가 매몰차게 거절한 것 같은 것이에요. 바로 CORS Error가 발생한 것이에요. 이..

우리 가족의 커뮤니티 웹 서비스를 만들기 위해 먼저 Server 작업을 하고 있는 것이에요. 코딩을 하면서 내용을 정리해서 나중에 주니 하랑도 확인하고, 여기 오신 여러분들과도 공유하고 싶은 것이에요! 그럼 시작해 보겠습니다! 해당 프로젝트에 대한 Source Code는 '주니하랑 Git Hub'에서 확인하실 수 있습니다. 🗂 목차(INDEX) 1. 초기구성 2. Spring Security 초기 구성 3. Interceptor 설정 . 4. 초기 Domain 설정 🚀 Build.gradle 먼저 주니하랑은 이번 프로젝트를 위해 이러한 서비스를 이용하고 싶은 것이에요. 객체 지향적 DB 관리를 위해 Spring DATA JPA를 사용할 것이고, RESTFul하게 웹 서비스를 만들기 위해 hatoas를 적..

안녕하세요? 주니하랑 입니다. 본 내용은 주니하랑이 Web 개발 프로젝트를 하면서 도전했던 기술들에 대한 내용을 정리하는 곳 입니다! 이 글은 함께 프로젝트 했던 Front End 꿈나무 Crew가 작성한 것이에요. 주니하랑은 Back End 개발을 맡았었답니다! 클라이언트는 리액트, 서버는 스프링 부트를 사용하여 개발을 진행하였습니다. 위와 같은 개발 상황에서 Axios를 사용한 API 통신을 진행하려 하자 CORS 에러가 발생했고 이를 해결한 과정을 소개 하려 하는 것이에요. CORS 에러는 왜 발생하는가? 프론트엔드 개발을 하면서 서버와 통신을 진행할 때 위와 같은 에러를 심심치 않게 발견하실 수 있습니다. 해당 에러는 CORS 정책을 위반할 때 발생하게 되는데요. 먼저 CORS의 기본적인 내용에 ..