Axios 를 통해 다른 서버를 통해 로그인 시도시 처리가 안되는 경우

axios 를 쓰던 ES6 의 fetch 를 사용하던 다른 출처(Cross Origin)를 통해 로그인을 시도할 경우 정상적으로 JSESSIONID 값을 저장하지 못하는 경우가 있다. 오늘은 그 원인과 해결 방법을 알아보자 

Cross Origin 이란?

cross origin 이란 서로 다른 출처를 말하는 것 이다. 예를 들어 같은 호스트여도 port 가 다르면 출처가 다르다. 이 건 SOP 정책에 의한 것인데. 프로토콜, 도메인, Port 중 하나라도 다를 때 적용된다.

//not same origin
http://localhost:3000 
http://localhost:8080

 

Request.Crendentials

fetch API 를 이용할 경우 Request 라는 인터페이스를  이용한다. 해당 인터페이스에는 credentials 이라는 프로퍼티가 있는데 클라이언트 브라우저가 위에서 언급한 것 처럼 Cross Origin 요청일 경우 자격증명 설정에 대한 옵션을 가진다. Ajax 를 이용할 경우 withCredentials 옵션과 비슷하나 withCredentials 옵션이 true ,false 만 있는 거와는 달리 crendentials 옵션은 아래와 같은 세가지 옵션을 가진다.

omit	cookie 금지
same-origin	same Origin 일 경우 자격증명(Cookie ,Authorizaiton Header) 등을 허용 (default)
include	cross-origin 호출이라도 자격증명(Cookie ,Authorizaiton Header)  등 정보를 허용 (단 CORS 헤더 값을 통한 SOP 회피를 해야된다)

same-origin 이 default 옵션이다. 그렇기 때문에 Cross-Origin 일 경우 자격 증명을 사용할 수 없는 것이다. 즉 사용하기 위해서는 include 로 설정해야 된다. AXIOS 를 사용할 경우 withCredentials : true  옵션을 주면  'include' 설정을 할 수 있다.

const handleLogin = () => {
  axios.post(`localhost:8080/login-action.do`, {}, {withCredentials: true}
  ).then(response => {
    
  })
}

 

CORS

요청에 대한 응답의 쿠키 정보를 활용하겠다고 설정만으로 끝나는게 아니다. 응답을 주는 서버 입장에서도 해당 응답 데이터의 접근을  CROSS-ORIGIN 에서 접근할 수 있도록 허용해 줘야 된다. 그러한 옵션이 CORS Header 인데 그중 아래 2가지 옵션을 설정해야 된다.

Access-Control-Allow-Origin: http://localhost:8080
Access-Control-Allow-Credentials: true

 

위 옵션에 대한 자세한 내용은 아래 링크를 참고하면 된다.

 

https://developer.mozilla.org/ko/docs/Web/HTTP/Headers/Access-Control-Allow-Credentials

https://developer.mozilla.org/ko/docs/Web/HTTP/Headers/Access-Control-Allow-Origin