axios withCredentials 옵션으로 쿠키 보내기(로그인 인증 유지 안될때)

 

😅문제

---

회사 내부 api를 사용하는데, api 응답으로 200은 뜨지만 데이터가 제대로 오지 않는 문제가 있었다.

백엔드 코드까지 보진 못했지만 서버에서 로그인을 한 유저인지 확인이 되어야 응답 데이터를 잘 넘겨준다고 했다.

 

근데 난 로그인 기능을 다 구현했고, 로그인 잘 동작하는것도 확인했는데 뭐가 문제인지 알 수 없었다!!

 

그러다 문제의 원인을 알게되었다!

서버는 아이디와 비밀번호를 확인해서 유저 정보가 맞는지 확인하고 sessionID를 클라이언트에 보내줘 인증상태를 유지한다.

클라이언트는 sessionID를 저장하고 있다가 다음 요청 때 저장해둔 sessionID가 담겨있는 쿠키를 HTTP 헤더에 넣어서 함께 전송하는데,

sessionID가 저장되지 않아 로그인이 된 건지 서버측에서 확인할 수 없었고 그래서 응답 데이터가 제대로 오지 않았던 것이다!

 

개발자 도구에서 확인해볼 수 있는데

수정전 이미지에서 로그인 요청의 Header를 까보면 쿠키가 없당..

반면, 수정 후는 쿠키에 JSESSIONID=~~로 저장되어 있다!

 

그럼 어떻게 수정해야하는지 알아보쟈~

수정 전: sessionID 저장되지 않음

 

수정 후: sessionID 저장됨!!

 

 

 

🧐 문제 해결 전 알고가기

---

withCredentials 

Credentials는 자격 증명 정보로, 쿠키, Authorization 헤더, TLS 클라이언트 인증서 등을 포함한다.

브라우저의 요청 API는 보안상의 이유로 기본적으로 다른 도메인 간의 요청 시에 인증과 관련된 데이터를 요청 데이터에 포함하지 않는다.

이런 경우, withCredentials 옵션을 사용하여 요청과 응답에 쿠키를 포함하도록 설정할 수 있다.

 

withCredentials 옵션은 다른 도메인에 요청을 보낼 때, 요청에 인증 정보를 담을지 여부를 결정하는 옵션이다.

쿠키나 인증 헤더를 요청에 포함시키려면 클라이언트에서 API 요청 메소드를 보낼 때 withCredentials 옵션을 true로 설정하면 된다.

또한, 서버에서는 Access-Control-Allow-Credentials 헤더를 true로 설정하여 인증된 요청을 허용해야 한다.

 

즉, 클라이언트와 서버 양쪽에서 Credentials를 true로 설정하면 쿠키와 같은 인증 정보를 주고받을 수 있는 것이다!!

 

백엔드는 이미 Access-Control-Allow-Credentials 헤더를 true로 설정된 상태였고,

프론트엔드는 어떻게 사용하는지 알아보자!!

 

 

 

 

 

 

 

✅ 찐 해결법

---

axios 설정에서 withCredentials 옵션을 true로 설정하면 된다!

3가지 방법을 알려드리겠숨다!
(앞서 말한 것 처럼 서버측에서도 Access-Control-Allow-Credentials를 true로 설정해야 함)

 

// 1. axios 전역 설정
axios.defaults.withCredentials = true; // withCredentials 전역 설정

// 2. interceptor 사용하기
axios.interceptors.request.use(
function (config) {
  // Do something before request is sent
  config.withCredentials = true;
  return config;
},
function (error) {
  // Do something with request error
  return Promise.reject(error);
},
);

// 3. axios 옵션 객체로 넣기
axios.post(
    'https://example.com:1234/users/login', 
    { profile: { username: username, password: password } }, 
    { withCredentials: true }
).then(response => { 
    console.log(response); 
    console.log(response.data); 
})

 

 

 

 

 

참고

---

https://lgphone.tistory.com/65

Web - 쿠키와 세션 (Cookie and Session)

https://inpa.tistory.com/entry/AXIOS-%F0%9F%93%9A-CORS-%EC%BF%A0%ED%82%A4-%EC%A0%84%EC%86%A1withCredentials-%EC%98%B5%EC%85%98

🍪 CORS 쿠키 전송하기 (withCredentials 옵션)