프린세스 다이어리

1. Vue로 개발 시 프록시를 설정해주는 이유 일반적으로 프록시 또는 프록시 서버는 클라이언트와 서버 간의 중간다리 역할을 한다. 프록시에 대한 글에 프록시의 개념과 종류에 대해 정리해 두었다. Vue 개발 시에는 개발 환경에서 프록시를 설정하여 사용한다. Vue CLI 서비스(웹팩 개발 서버)를 사용하여 개발 모드에서 앱을 실행하는데 개발 환경에서 /api/reservations/:id로 요청을 하면 자동으로 http://localhost:8080/api/reservations/:id로 호출이 된다. 이렇게 되면 localhost:8080는 백엔드 서버에서 허락한 도메인이 아니기 때문에 브라우저에서 CORS 오류가 난다. 배포를 하고 나면 미리 설정한 도메인으로 바뀌니 상관이 없지만 로컬에서 개발 도..

1. 프록시란 프록시는 클라이언트와 서버 사이에 위치하여, 그들 사이의 HTTP 메시지를 정리하는 중개인의 역할을 한다. '프락시'라고 하는 것이 표준어인 것 같은데, 보편적으로 프록시라는 단어가 더 많이 쓰이고 있고 나도 프록시라는 말이 더 친숙해서 굳이 표준어를 고집하지는 않으려 한다. 프록시라는 단어를 인터넷에 검색한 결과나, 일전에 프록시 우회 프로그램을 활용했던 경험에 비추어 보았을 때, 프록시는 VPN과 비교하여 다소 부정적인 방식으로 활용이 되거나 보안성의 측면에서 떨어진다는 인식이 있는 것 같다. 2. 프록시는 게이트웨이와 어떻게 다를까? 웹 프록시 서버는 클라이언트와 서버 사이에서 트랜잭션을 수행하는 중개인이다. 프록시 서버는 HTTP 클라이언트의 요청을 받기 때문에 클라이언트 입장에서는..

입사 초기에 잘 몰라서 해결하는 데 오래 걸렸던 이슈였다. 사실 지금 생각하면 해결점이 꽤나 뚜렷한 초보적인 고민이었는데 당시에는 대체 누가 이걸 해결해야 하나 구글만 뒤지고 있었다. preflight이 뭔지도 모르고, 도대체 OPTIONS는 쓰지도 않았는데 왜 계속 등장하는지 서로 익숙지 않아 애를 썼던 기억이 난다. 브라우저의 보안에 대해 잘 알고 있었다면 문제없이 해결할 수 있었을 거다. 1. CORS란 먼저 CORS 가 가능하기 전 브라우저가 공격으로부터 보호하기 위해 동일 출처 정책(SOP)을 가지고 엄격하게 제약을 걸었다는 것을 짚고 넘어가야 한다. 브라우저에 대한 공격은 크게 능동적 공격과 수동적 공격으로 분류된다. 능동적 공격은 해커가 웹서버에 직접 공격하는 것을 뜻하고, 수동적 공격은 웹..