[TIL] FE&BE 간 Cookie 전달 이슈

김시원·2023년 5월 16일

목록 보기

23/50

TIL

📌 Issues encountered

Issue #1

백엔드 서버 배포 후, 프론트엔드 로컬 호스트에서 연결은 잘 되었으나, 쿠키 전달에서 오류가 났다. 로그인 진행을 하면 network 탭의 header -> set-cookie와 application 탭에 쿠키는 잘 저장이 되었지만, 인증을 필요로 하는 (auth-middleware)를 통과하는 API 요청을 하면 403 에러가 뜨면서 쿠키가 아예 전달이 되지 않았다. 개발자 도구에서도 해당 요청에 대해 Cookies 해더가 아예 없었다.

Issue #2

AWS EC2로 배포된 백엔드 서버에 서브 도메인 연결하기

📌 What I tried

Issue #1

1. 프론트엔드와 백엔드 모두 CORS 설정을 재확인했다.

// React
const instance = axios.create({
  baseURL: API_URL,
  withCredentials: true, // Add this line to enable sending cookies
});

withCredentials: true를 주면 Cookies에 브라우저가 자동으로 쿠키를 넣어준다.

pp.use(
  cors({
    origin: "http://localhost:3000",
    credentials: true,
  })
);

Cookies를 받기 위해 *이 아닌 특정 origin을 설정해주고, credentials값을 true로 준다.
사실상, 이미 로그인은 정상적으로 됐기 때문에 CORS 설정의 오류는 없다.

2. 프론트엔드와 백엔드 서버를 동일한 도메인으로 배포하거나 동일한 도메인에 호스팅을 한다 => Same Origin Policy 관련

쿠키 전달 에러 인프런 질문
여기서 프론트와 백엔드의 도메인이 다른 경우 쿠키 설정이 어렵다고 해서 지금 단계에서 배포된 프론트엔드 서버에는 broccoli-market.store 도메인을, 백엔드 서버에는 api.broccoli-market.store라는 서브 도메인을 연결해보았다. (연결 과정 -> issue #2)
역시 도메인 문제였다. 프론트와 백엔드 간에 쿠키를 전달할 때 Same-Origin Policy 웹 보안 메커니즘을 준수해야한다.

Issue #2

프론트엔드는 localhost:3000으로 서버를 구동하고, 백엔드 서버는 IP 주소이기 때문에 도메인 불일치 문제가 생기는 것이었다. 실제로 same-origin policy에 어긋나게 접근을 하면, 네트워크 탭 set-cookie 부분 토큰 값 옆에 ! 경고 사인이 떴다.
도메인을 맞춰주기 위해 프론트엔드도 배포를 하였다. 프론트는 S3로 배포를 진행하였다.
다음 포스팅에서 해준 것 같이 도메인과 서브 도메인 설정을 해주었다.
서브 도메인 설정 블로그 포스팅
도메인 문제가 해결되니 쿠키 문제는 자연히 해결되었다! 또한, cors 설정을 배포된 도메인 이름으로 변경해주었다.

📌 What I newly learned

서브 도메인 설정에서 시간을 많이 썼다. 처음에 서브 도메인에 배포 주소가 잘 연결이 되었는데 갑자기 또 막혀서 nginx에 서브 도메인 디렉토리 생성, 경로 설정 (이거보고 함) 이런 저런 것들을 설정해주었는데 다 안됐었다.
또, ssh에서 nginx default 파일 server_name 등등을 설정해주다가 갑자기 ssh 루트 디렉토리로 넘어갔었는데 그걸 인지 못하고 거기서 무의식중에 pm2 start를 하였다. 근데 이걸 해놓고 다른 작업을 하다가 다시 ssh 터미널로 돌아왔더니 현재 디렉토리가 우리 repository 디렉토리가 아니어서 터미널을 끄고 다시 ssh 접속을 하고 또 pm2 start app.js를 했더니 3000 포트가 이미 사용중이라는 에러가 계속 떴다.... 처음 pm2 start를 어디서 했었는지 기억을 못해서 포트 번호를 변경해주고 포트포워딩도 해줬는데 그것도 안돼서 결국 EC2 인스턴스도 다시 생성했다... 암튼 시행착오가 조금 많았다.
내가 놓치고 갔던 부분이 프록시 서버 설정 부분이었다. Nginx에 프록시 서버로서 어떤 배포 IP로 redirect할 지 명시를 안해주고 그냥 서브 도메인 이름만 명시해주었다. 이는 proxy_pass 경로를 설정해줌으로서 해결되었다.
저번주 주특기 프로젝트에서도 이런 쿠키 이슈가 있었는데 그때는 결국 프론트&백 간에 토큰을 쿠키로 전달을 하지 않고 헤더로 보내줘서 req.headers로 받아왔는데 이 부분도 내가 담당하지 않아서 정확히 상황 인지를 못한 상태였었다. 그러나, 이번 클론 프로젝트에서 이 문제에 대해 내가 직접 해결해볼 수 있어서 시행착오는 많았지만 많이 배웠던 것 같다.