항해 99를 시작하고 바쁘게 하루하루를 보내며 눈 깜짝 할 사이에 또 한 주 가 지나갔다.
이번주 금요일부터 3주간의 주특기 주차가 끝나고 미니프로젝트 주차가 시작되었다. 내가 선택한 주특기인 자바와 Spring을 이용하여 새로운 백앤드 팀원들과 그리고 프론트앤드 팀원분들과 함께 미니프로젝트를 진행하게되니 설레는 마음도 있지만 아직 너무나도 부족한 주특기에 대한 숙련도로 인해 두려운 마음도 있다.
그래도 항해 1주차에 진행했던 미니프로젝트보다는 수월하게...? 진행될 것 같다는 생각이 드는것을 보아 1주차에 비해서는 내가 성장을 했구나 라는 생각도 함께 들었다.
이번 미니프로젝트에서는 프론트와 백을 완전 나누어 진행을 하다보니 1주차와 다르게 프론트분들은 react를 사용하고 백은 Spring을 사용하여 각자 분업을 하고 병합을 해야하는 상황이다.
그러다보니 react에서는 로컬 테스트시 3000번 포트를 사용하는 것 같았고 Spring boot에서는 8080 포트를 사용하다보니 어떻게 병합을 해야하는지와 로컬에서 이걸 함께 테스트를 해보려 한다면 어떻게 해야할까 라는 생각도 들었다.
역시 생각보단 행동으로...! 바로 구글링을 하였고 로컬에서 테스트를 하려면 서로 포트 번호가 다르기 때문에 CORS를
프론트 쪽에서 proxy를 설정하여 맞추어 주거나
Spring쪽에서 CORS에 대한 작업이 필요했다.
이렇게 설정을 하고 실행을 하였을 때 에러가 발생했고 좀 더 찾아보니 spring security 쪽에서도 설정을 해주어야 한다고 한다...
역시 처음은 쉽지 않은 것 같다.. 그래도 이러한 시행착오도 경험치가 되고 쌓이게 되면 나중에는 쉬워질 거라 믿는다!
CORS란?
> 도메인 또는 포트가 다른 서버의 자원을 요청하는 메커니즘
교차 출처 리소스 공유(Cross-Origin Resource Sharing, CORS)는 추가 HTTP 헤더를 사용하여, 한 출처에서 실행 중인 웹 애플리케이션이 다른 출처의 선택한 자원에 접근할 수 있는 권한을 부여하도록 브라우저에 알려주는 체제이다.
CORS는 어떻게 동작하는가?
-
기본적으로 웹은 다른 출처의 리소스를 요청할 때는 HTTP 프로토콜을 사용하여 요청을 하는데,
이때 브라우저는 요청 헤더 (request header)에 Origin 필드에 요청을 보내는 출처를 담아 전송한다. -
서버는 요청에 대한 응답을 하는데, 응답 헤더 (response header)에 Access-Control-Allow-Origin이라는 값에 '이 리소스를 접근하는 것이 허용된 출처'를 내려준다. 이후 응답을 받은 브라우저는 자신이 보냈던 요청의 Origin과 서버가 보내준 응답의 Access-Control-Allow-Origin을 비교해 본 후 이 응답이 유효한 응답인지 아닌지를 결정한다.
CORS 동작의 시나리오
Prefilght Request
Preflight 방식은, 요청을 한번에 보내는 것이 아니라 예비 요청과 본 요청으로 나누어서 서버로 전송한다.
본 요청을 보내기 전 미리 예비로 보내는 요청을 Preflight라고 하며, HTTP 메서드 중 하나인 OPTIONS 메서드를 사용한다.
단순히 Origin에 대한 정보 뿐만 아니라 자신이 예비 요청 이후에 보낼 본 요청에 대한 다른 정보들도 함께 전송 한다. 어떤 헤더를 포함 할 것인지, 어떤 HTTP 메서드를 사용하여 요청을 보낼 것인지 말이다.
Simple Request
Preflight 요청과는 달리, 예비 요청을 보내지 않고, 서버에게 바로 본 요청을 전송한다.
이 후 서버가 응답 헤더에 Access-Control-Allow-Origin과 같은 값을 보내주면 그때 브라우저가 CORS 정책 위반 여부를 검사하는 방식이다.
Credentialed Request.
인증된 요청을 사용하는 방법이다.
다른 출처 간 통신의 좀 더 보안을 강화하고자 할 때 사용한다. 브라우저가 제공하는 비동기 리소스 요청 API인 XMLHttpRequest 객체나 fetch API는 별도의 옵션 없이 브라우저의 쿠키 정보나 인증과 관련된 헤더를 함부로 요청에 담지 않는다. 이때 요청에 인증과 관련된 정보를 담을 수 있게 해주는 옵션이 바로 credentials 옵션이다.
credentials도 세가지 옵션을 가지고 있다.
- same-origin : 같은 출처 간 요청에만 인증 정보를 담을 수 있다.
- include : 모든 요청에 인증 정보를 담을 수 있다.
- omit - : 모든 요청에 인증 정보를 담지 않는다.
