본문 바로가기
Front-End/Minor Tips

Axios 사용해서 응답으로 쿠키가 받아지지 않을 때 (withCredentials)

by 우인입니다 2023. 10. 7.

문제

Axios를 이용해 쿠키에 토큰값을 응답으로 전달받는 POST메소드를 보냈을 때, 쿠키에 토큰값이 전달되지 않는 문제

 

axios를 통해 로그인 POST메소드를 요청하고 그 결과를 콘솔에 찍었다.

 

HttpServletResponse에 쿠키를 담아서 보냈다.

 

Postman으로 요청했을 때는 Set-Cookie가 잘 담겨온 모습.

 

 

console.log(res);
console.log(res);
비어있는 쿠키

개발자 도구로 확인했을 때, header나 다른부분을 봐도 cookie가 들어오지 않는다.

 

 


해결방법

withCredentials : true 옵션

클라이언트 - 서버 사이의 다른 오리진으로 인해 CORS를 허용하게 설정을 해준 경우라도,

기본적으로 Cross-Site에 대해서 별도의 옵션 설정없이는 Credential을 전달하진 않는다고 한다.

그래서 아래처럼 설정을 해줬다.

 

이제는 쿠키에 해당 토큰값이 잘 실려들어온다.

 

 

서버에서의 CorsFilter옵션

이전에 설정해둔 CorsFilter를 살펴보면 서버단에서도 해당 옵션을 allow해준 게 보인다.

결국에 서버, 클라이언트에서 모든 세팅을 해줘야 한다는 뜻.

 

이번에 axios로 클라이언트에서 응답을 받아들일 때 추가적으로 해당 옵션을 변경하여 쿠키를 받을 수 있었다.

 

 

 

 

참고링크

https://velog.io/@ohzzi/%EC%BF%A0%ED%82%A4%EB%A5%BC-%EC%82%AC%EC%9A%A9%ED%95%9C-API-%ED%86%B5%EC%8B%A0%EC%9D%84-%ED%95%A0-%EB%95%8C-%EC%A3%BC%EC%9D%98%ED%95%A0-%EC%A0%90