개발

withCredentials 속성을 알아보자 (서버와 클라이언트 쿠키 공유)

썽연 2022. 7. 25. 12:37
728x90

Credentials란? (인증서)

  • 쿠키, 인증헤더, TLS client certificates(증명서)
  • Credentials이 있는 CORS요청은 Client와 Server 둘 다 Credentials를 사용하겠다는 속서을 설정해주어야 통신이 가능하다.

CORS 요청시 Client에서 XML HttpRequest.withCredentials 속성을 true로 설정을 해야한다!
요청하기 전에 withCredentials가 true로 설정되어 있지 않으면 다른 XML HTttpRequest가 자신의 도메인에 대한 쿠키 값을 설정할 수 없다.
withCredentials를 true로 설정하여 얻은 타사 쿠키는 여전히 동일한 출처 정책을 준수하므로 document.cookie 또는 응답 헤더를 통해 요청하는 스크립트에서 액세스할 수 있다.

그래서 결론은?

withCredentials: true로 설정해주면 client와 server가 쿠키 값을 공유한다는 것이다!

axios.post(
	'/api/auth/sign-in', { 
    	email: email, password: password 
    }, {
    withCredentials: true,
  },
)

위 코드처럼 속성을 설정해주면 서버에서 전달해준 쿠키 값을 클라이언트에서 쿠키에 집어넣는다는 소리와 같다.

delete할 때도 속성을 넣어주면, 해당 쿠키의 계정을 delete한다.

아무튼 결론 - 쿠키를 공유한다!

728x90