[Web] withCredentials는?

withCredentials

로그인 할 때, 아이디와 비밀번호가 서버로 넘어오면 유저의 정보가 맞는지 확인하고 cookie에 token을 발급한다. 그 후에도  다른 페이지에서 인증 할 때도  이 token으로 인증한다.

 

백엔드와 프론트 도메인이 다르면, 로그인 성공해도 별다른 에러 없이 인증되지 않는다.

그 이유는 도메인 주소가 서로 다르면, 쿠키가 전송되지 않기 때문이다.

 

 

프론트엔드와 백엔드에 withCredentials를 설정하지 않는다면, 어떻게 될까?

결론부터 말하면, 백엔드에서 Response Header에 set-cookie로 토큰이 넘어오긴하지만, 브라우저에 쿠키에는 저장되지 않는다.

 

로그인을 위해서 백엔드에서 jwt 토큰을 만들어서 클라이언트로 토큰을 전송했다.

Response Header에 'Set-Cookie'로 들어가 있는 것도 확인했다. 

그런데, 브라우저 쿠키에는 저장되지 않고 있었다.

프론트에 axios에 withCredentials를 설정하고 다시 보니까, 이번엔 CORS 에러가 발생한다.

백엔드에  다음처럼, cors 라이브러리 설정에 credentials 속성을 추가해주니까, 

// server/src/server.ts
app.use(
  cors({
    origin,
    credentials: true,
  })
);

 

정상적으로 서버에서 받은 토큰이 브라우저 쿠키에 들어간 것을 확인할 수 있었다.

 

 

서로 다른 프론트와 백엔드 도메인 간에 cookie 통신방법

도메인이 달라도 쿠키를 요청받을 수 있게 axios 쪽과 백엔드에 cors 라이브러리에 설정을 해준다.

 

 

프론트는,

axios는  Response Header에  Access-Control-Allow-Credientials를 설정해 준다.

그냥, 아래처럼 하면된다.

 

백엔드는,

cors 라이브러리 사용 옵션에 credentials: true 추가