23년 02월 15일

기본적인 프론트 페이지 개발에 들어갔다.

리액트를 사용해 본격적으로 만드는 것은 아니고, 기본적인 자바스크립트와 html, css를 이용해 만들기로 했다.

직접 하나 하나 만들 자신은 없고, 만들어진 템플릿을 가져다가 api와 연결하는데 문제가 생겼다.

검색해보니 인터넷 연결 문제, 크롬 설정의 문제, vscode설정의 문제 등이 나왔는데 모두 아니었다.

로그인 페이지 자체가 가져다 쓴거라  신경 쓰지 않았는데, 회원가입 버튼이 submit으로 되어있었다. 이를 button으로 바꾸니 잘 동작이 되었다.

그리고 그다음 예상했던 문제가 나왔다.

사실 타입리프로 구현을 하지 않고 vscode로 따로 프론트를 구현 해 본 이유가 여기에 있는데 cors처리를 한번 해 보고 싶었다.

cors는 Cross-Origin Resource Sharing(교차 출처 리소스 공유)라는 뜻이다.

cors는 SOP(Same-Origin Policy),즉 동일 출처 정책때문에 생긴 정책인데, 간략하게 정리하자면, 동일 출처가 아닌 어플리케이션끼리 상호작용하는 것은 악의를 가진 누군가가 간섭해 피해를 입힐 위험이 큰 방식이고, 그래서 브라우저는 동일 출처 정책을 강요한다.

문제는, SOP를 지킨답시고 동일 출처가 아닌 다른 어플리케이션들을 모두 차단해버리면, 다른 출처의 리소스를 활용해야 하는 상황에서 매우 곤란할 것이다.

그래서 최소한 CORS 정책을 허용하는 리소스에 한해 상호작용을 허용한다는 예외를 두었다.

즉, 저 에러메세지는 SOP 정책에 따라 브라우저가 다른 출처의 리소스를 차단해서 나오는 에러이고, CORS는 이를 해결해줄 수 있는 해결책이라고 한다.

스프링에서는 WebMvcConfigurer로 이를 설정 해줄 수 있는데, 어느쪽 출처를 설정해줘야하는지 잘 몰라서 한참 애를 먹었다.

이론을 이해하지 못하고, 무작정 설정해 줘서 그랬던것 같다.

좀 더 자세히 알아보고 요청하는 쪽, 즉 프론트쪽 url을 설정해 주니 통과를 하는 것을 확인할 수 있었다.

cors관련 프리플라이트에 대해서도 얕게 알게 되었는데 이쪽은 나중에 더 알아보아야 할 것 같다.