소켓통신이 다시 말썽을 부리기 시작했다.
서버 내에서 빌드된 Vue와 Express간 통신은 잘 작동한다.
그런데 개발을 위해 local Vue에서 서버 Express로 통신을 하려 하면 소켓 연결은 되지만, 소켓 내 session 인증이 안된다...
😇
내부에서는 되지만 외부에서 안된다? CORS 오류의 냄새가 난다.
socket.io와 passport를 연동해주는 passport.socketio 라이브러리의 공식 문서에서 cors 관련 내용을 찾아봤는데, 역시 있었다.
문서를 요약하자면, cors가 발생할 경우 client에서 연결 요청 시 session id query에 실어주면 된다고 한다.
그렇다면 해야할 일은 두가지로 나뉜다.
- 로그인 후 브라우저 cookie에 저장되는 session id를 Vue에서 읽는다.
- session id를 query에 담아서 소켓 연결을 시도한다
Vue에서 cookie 읽기
우선 vue-cookies 라이브러리를 설치한다.
npm install vue-cookies
라이브러리를 가져오고 쿠키를 읽어본다.
import VueCookies from "vue-cookies";
Vue.use(VueCookies);
console.log(window.$cookies.get('express.sid'));
그런데... Vue에서 쿠키를 읽지 못한다...
브라우저에 있는건 확인할 수 있는데! 읽지를 못한다.
구글링 해보니. httpOnly가 false여야만 js코드로 소켓을 읽을 수 있다고 한다.
보안 상 좋은 옵션은 아니므로, local 개발 할 때만 사용하도록 백엔드 코드를 수정하였다.
// app.js
app.use(session({
key: 'express.sid',
secret: process.env.COOKIE_SECRET,
saveUninitialized: true,
resave: true,
cookie: {
httpOnly: false,
secure: false
},
...
이제 Vue에서 정상적으로 session id를 읽어올 수 있게 되었다.
session id를 query에 담아 socket.io 연결하기
const socket = io.connect(소켓서버주소, {
query: 'session_id=' +
window.$cookies.get('express.sid').replace('s:','').split('.')[0];
});
가져운 쿠키를 통째로 보내면 정상 작동하지 않는다.
실제 쿠키를 읽어보면 중간에 .으로 구분되어 있는데, 앞부분이 실제 session id라고 한다. 따라서 위 코드와 같이 파싱을 해줘야 한다!
http://itdoc.hitachi.co.jp/manuals/3020/30203Y0510e/EY050057.HTM
https://github.com/jfromaniello/passport.socketio/issues/95#issuecomment-92217786
이러니 다행히 정상 작동한다👍
'대회, 프로젝트 > 2021 군장병 해커톤' 카테고리의 다른 글
[2021 군장병 공개SW 온라인 해커톤] 후기 및 회고 (0) | 2021.11.13 |
---|---|
Backend 기능 설명 (0) | 2021.10.28 |
[Vue.js] Socket.io 연결 Issue 해결 (0) | 2021.10.12 |
[Node.js] Socket.IO + JWT + Session (0) | 2021.10.12 |
[Docker / M1 sillicon] MySQL Build Error, 컨테이너 내에서 한글 입력 (0) | 2021.10.09 |
Comment