세션과 CORS 문제

이전에 세션을 통해서 로그인 인증 기능을 구현하려고 했지만 12시간에 노력 끝에 포기했다...

JWT로 넘어가기로 했지만 해결 못해서 분하다.

CORS 문제 때문이라고 하는데 도대체 이게 뭘까?

해결은 못했고 왜 안되는지 원인이라도 확실하게 알고 가야겠다.

 

 

CORS란?

Cross-Origin Resource Sharing의 약자로 교차 출처 리소스 공유라고 한다.

여기서 Origin은 프로토콜 + 도메인 + 포트 모두를 합친 것을 뜻한다.

이 때 리소스를 요청할 때 요청한 쪽의 Origin과 요청받은 쪽의 Origin이 다르면 CORS에러가 발생한다고 한다.

출처: https://docs.tosspayments.com/resources/glossary/cors

 

a. CORS 동작 원리

CORS 동작 원리를 모두 정리하기에는 내용이 너무 방대하고 어렵다....

https://velog.io/@jh100m1/CORS-에러가-뭔데-어떻게-해결하는건데

해당 글을 보면서 어느정도 이해했다.

b. CORS 발생 이유

CORS는 동일 출처 정책에 의해서 생겼다고 한다.

동일 출처 정책은 동일한 출처(같은 Origin)에만 접근하도록 제한하는 정책으로 브라우저에서 자동으로 쿠키가 첨부되는 것이 보안상 문제가 발생할 수 있기 때문에 이를 해결하기 위해 생겼고 이 때문에 CORS 문제가 발생한 것이다.

c. React-Spring CORS 발생 이유

결국 React-Spring 세션 인증 로그인 방식도 이 문제 때문이었다.

즉, React에서 사용하는 Origin이 http://localhost:3000이라고 하면 Spring에서 사용하는 Origin은 http://localhost:8080으로 서로 다른 Origin으로 판별하고 리소스 접근을 아얘 차단해버리기 때문이다.

그러면 Origin이 다르면 포기해야 할까?

위 사이트나 출처에 있는 toss의 해결 방식을 보면 중계 서버 역할을 하는 프록시 서버나 http-proxy-middleware를 사용해서 해결할 수 있다고 하는데 다음에 한번 해봐야겠다.

 

마무리

세션 인증에 실패한 것이 분해서 원인인 CORS에 대해서 공부해봤다.

역시 쉬운게 없다는 생각이 들었다.

가장 이해하기 어려웠던 부분이 분명히 세션은 유지되고 서버는 잘 돌아가는데 프론트에서 계속 에러가 났다는 것이다.

해결책만 놓고 보면 서버쪽에서 프록시 서버나 다른 방식을 적용해야 하는데 프론트에서 문제가 발생하니 원인이 프론트에 있고 거기서 해결해야하는 문제로 보였기 때문이다.

지금은 분하지만 현재 많이 사용하고 있는 JWT를 사용하기로 했고 이미 기본적인 틀은 모두 수정해 놓은 상태이지만 꼭 다음 프로젝트할 때는 세션으로 끝장을 볼 생각이다.

 

 

출처

1. https://docs.tosspayments.com/resources/glossary/cors

2. https://velog.io/@postlist/CORS-%EB%AC%B8%EC%A0%9C-SpringBoot-React

3. https://xiubindev.tistory.com/115