로그인 기능 적용과 몇 일간의 뻘짓 (feat . CORS (Cross-Origin Resource Sharing) )

세션 로그인 구현후 프로젝트에 적용 과정에서 디버그를 잘 하지 못해서 많은 시간을 허비(?) 했다. 

화가나서 스스로 욕을 좀 많이했는데, 문제가 해결된 지금상황에서 돌이켜 보면 헷갈릴만 했고 몇 가지 WEB의 정책적인 부분에 대한 이해가 필요했던 것 같다. 팀원 중 팀장형의 도움이 없었으면 더 오랜시간 헤맷을 것 같다.

디버그 방식은 다양하게 있겠지만 이번에 새롭게 배운점은 구현이 잘된 코드를 찾아본 후 내 코드와 대조하는 방식으로 디버그 하는 것도 효과적이라는 것을 깨달았다. 

 

이번에 문제가 되었던 것들, 새롭게 알게된 부분과 참고한 자료들을 포스팅하였다.

 

현상

1. node js express 서버(5000)와 간이형식(index.html)을 사용하여 간단히 로그인 기능을 단독으로 구현했을때는 전혀 이상이 없었다. 

2. react + express ( 3000 + 5000 )에 1에서 구현한 로그인 기능을 적용하고 CORS설정도 해주었다. 그리고 postman으로 정상 작동함을 테스트했고 이상이 없었다.

 

이와 같은 이유로 내가 구현한 로그인 기능에서 문제가 전혀 없다고 판단을하고 다른 사람들이 작성한 코드들을 이해해서 수정해보는 시도를 반복했다. 알고보니 CORS와 관련된문제 + data 전달 형식 문제가 있었다. 

 

문제

프로젝트에 해당 기능을 적용한 후 react(port : 3000)와 express (:5000) 개발환경에서 사용했을때 2가지 문제가 생겼다.

(문제 1) 서버에 접속할때마다 새로운 세션이 생성되는 현상. 

(문제 2) react로 data를 전송하는 api에서 알맞은 형식으로 데이터가 전송되지 않음. 

 

문제 2의 경우는 미들웨어 순서에 실수가 있었고, 전송하는 API 작성형식도 잘 신경쓰면 되는 것 같다. 

 

문제 1의 경우 3000포트에서 5000포트로 접근할 때마다 기존에 생성됬던 세션정보가 전달이 되지 않았던 문제였다. ( 3000이 세션을 저장하지 못했음). 이 문제 관련해서는 처음에 해결했다고 생각한 CORS와 관련이 있었다. credentials 관련하여 추가적으로 해야되는 일이 있었다. 웹은 기본적으로 SOP (Same origin policy)를 따르고 이 부분에 대해서 CORS로 해결을 하는 것으로 다들 알고 있다. 

하지만 쿠키(세션)을 사용하는 credential과 같은 자격증명을 위해서는 조금 더 엄격하기 때문에, 서버, 클라이언트 양쪽에 명시적으로 선언이 되어야 했다. 

https://developer.mozilla.org/ko/docs/Web/Security/Same-origin_policy

동일 출처 정책 - 웹 보안 | MDN

https://developer.mozilla.org/ko/docs/Web/HTTP/CORS

교차 출처 리소스 공유 (CORS) - HTTP | MDN

 

 

https://stackoverflow.com/questions/9870523/what-are-the-differences-between-application-json-and-application-x-www-form-url

What are the differences between application/json and application/x-www-form-urlencoded?

https://kosaf04pyh.tistory.com/152

[WEB] withCredentials 옵션

https://developer.mozilla.org/ko/docs/Web/API/Fetch_API/Using_Fetch

Using Fetch - Web API | MDN

 

https://fierycoding.tistory.com/36

express-session 패키지의 resave, saveUninitialized 옵션

 

 

https://www.youtube.com/watch?v=bW31xiNB8Nc