[Node] 쿠키 전달이 안돼서 로그인이 안된다면? (express)

 

 

[Node] 쿠키 전달이 안돼서 로그인 인증이 안된다면? (express)

 

로그인을 했는데, 로그인 체크를 해봤더니 로그인이 안됐다고 한다.. 왜지?
도메인이 다른 브라우저와 서버가 있을때, 브라우저가 서버에 api 호출하게되면 cors에러가 발생한다.
그래서 이전에 cors모듈로 access-control-allow-origin을 해더에 추가해서 문제를 해결했었다.
이와 마찬가지로 도메인이 다르면 쿠키도 전달이 안된다.

 

로그인을 성공하게되면 서버에서 id와 임의의 문자열을 세션으로 만들고,
그 문자를 connect.sid라는 이름으로 쿠키에 담아서 부라우저에 보내준다. + 유저 정보를 내려준다.

여기서 유저 정보는 제대로 내려주는데 쿠키정보는 전달되지 않는다.

이유는 위에서 언급한 도메인이 다르기 때문이다.

 

서버에서 세션 id를 쿠키에 전달해주고,

브라우저에서는 그 쿠키를 가지고 로그인 인증이 필요할때마다 api호출시 같이 넣어 보내준다.

그럼 서버에서는 그 세션id를 가지고 사용자를 다시 인증할 필요 없이 세션 정보를 통해 사용자가 누구인지 알아낼 수 있게 됩니다.

 

도메인이 다르게 되면 서버에서 브라우저로 주는 쿠키를 받을 수도 없고,
브라우저에서 서버로 세션id를 쿠키에 같이 보낼수도 없는것이다.
데이터 확인을 못하니 로그인 유무를 확인할 수 없다.

이를 해결하기 위한 방법은 몇가지가 있는데 proxy로 하는 방법이 있는데,

그보다는 cors모듈 사용하기가 대표적으로 있다. --> credential 옵션으로 해결, 대신 cors도 구체적으로 바꿔줘야 한다.

 

 

cors모듈 사용

구체적으로는

1. 서버에서는 express의 cors 모듈을 사용할때 credentials 옵션을 추가

 

/백단/app.js

app.use(
    cors({
        // true or * // access-control-allow-origin가 true된다. --> 다른 도메인끼리 api 요청
        origin: "http://localhost:3000",
         // access-control-allow-credential가 true된다. --> 다른 도메인끼리 쿠키 전달
        credentials: true,
    })
);

 

 

 

2. 프론트에서 api호출할 때 withCredential 옵션 추가

주의 axios로 호출할 때

• get, delete에서는 첫번째 자리 = url, 두번째자리 = 옵션 객체 <-- 여기에 withCredential 추가
• patch, put, post에서는  첫번째 자리 = url, 두번째자리 = 데이터, 세번째 자리 = 옵션 객체 <-- 여기에 withCredential 추가

post, patch, puat ==> axios.post("/user/login", data, {withCredential: true});
get, delete ==> axios.get("/user", {withCredential: true});

 

그런데 이렇게 호출할때마다 중복적으로 사용하는 것보다는

// 도메인다른 백엔드 서버와 쿠키 주고받을 수 있다.
axios.defaults.withCredentials = true;

 

default 옵션으로 지정해놓으면

호출할때마다 적용된다.