CORS 2

[CORS] CORS 개념 + 에러 해결방법 (Netlify 배포용 팁 포함)

프론트엔드 개발을 해 본 사람이라면 CORS 이슈를 정말 많이 접해봤을 것이다. CORS는 뭐고 왜 굳이 우리를 이렇게 귀찮게 하고 어떻게 하면 해결할 수 있을까? CORS (Cross-Origin Resource Sharing) CORS는 이름에서도 알 수 있다시피 서로 다른 출처에서 자원이 공유되는 것을 의미한다. 따라서 CORS에 대해 이해하기 위해서는 출처 (Origin)이라는 것이 어떻게 정의내려질 수 있는지가 중요하다. 인터넷 URL은 프로토콜, 호스트, 경로(path), 쿼리문, 프래그먼트 등 여러 가지 요소로 구성되어 있다. (URL 구조 관련 포스트 참고) 그 중에서 Protocol, Host, Port 총 세 가지가 일치하면 하나의 Origin으로 여겨진다. (일반적으로 포트 번호는 규..

[Heroku] Heroku 배포 이후 request.session이 제대로 저장되지 않을 때

이번에 MERN 스택으로 이미그레이션한 유튜브 클론프로젝트를 Netlify, Heroku로 각각 프론트엔드와 서버를 배포했다. (DB는 이전에 사용했던 MongoDB Atlas를 그대로 사용했다.) 그런데 development mode에서는 정상적으로 작동하던 session이 heroku로 배포되면서 제대로 유저 정보를 저장하지 못하기 시작했다. (참고로 세션은 MongoDB Atlas를 통해 persist하고 있었는데 DB에는 제대로 session이 저장되어 있었다. 따라서 DB와의 커넥션 문제는 아니다.) 해결 방법은 다음과 같이 express-session 미들웨어의 config를 설정해주면 된다. "proxy : true"에 대한 멘션은 정말 많은 검색을 해도 잘 나오지 않았는데 Heroku 혹은..

잡다한 교훈 2022.04.08