passport local CORS (프론트, 백 분리 시 sid 쿠키 저장 안되는 현상 해결)

passport local은 session을 사용한다.

 

브라우저에 connect.sid라는 쿠키 값을 저장하여 인증을 한다.

 

connect.sid 값이 잘 발급되고, 브라우저에 저장이 되면 인증이 성공적으로 완료된 것이다.

 

브라우저에 connect.sid값이 잘 저장되었는지는  chorme 개발자도구 > Application > Cookies에 가면 확인할 수 있다. 

 

 

개발 환경 

프론트 : Ionic + Angular 

-> 8100번 port 

 

백 : node js / express 

->8002 , 8003 port  (http, https)

 

기존에는 http 를 사용하여 통신을 하고 8002번 포트만 사용하였다. 

 

 

상황 분석 

 

post man 이나 chorme 개발자 도구로 응답의 cookies를 확인했을 때 connect.sid는 잘 오지만 크롬 브라우저에는 저장되지 않았다. 

 

cors option 또한 다른 곳에서 하라는 대로 잘 맞춰둔 상태였다. .

 

해결

 

정말 많은 시도를 해보고 구글링을 해보다가 어떤 문서를 발견했다(너무 많은걸 봐서 다시 찾지는 못하겠다..)

크롬에서 http 통신을 통해서 데이터를 주고받으면 cors 문제로 작동하지 않는게 너무 많다는 내용이였다.

 

그래서 mkcert 를 이용하여 인증서를 발급받은 후, https 서버를 만들어서 해결했다.

 

 

app.js에 다음과 같이 작성해 주었다. 

const options = {
  key: fs.readFileSync("./config/localhost-key.pem"),
  cert: fs.readFileSync("./config/localhost.pem"),
};

https.createServer(options, app).listen(HTTPS_PORT);

 

이후에 프론트의 apiUrl을 http port로 변경하면 된다. 

 

++참고로 cors option은 다음과 같이 설정했다. 

const safesitelist = ["http://localhost:8100"];

const corsOptions = {
  origin: function (origin, callback) {
    const issafesitelisted = safesitelist.indexOf(origin) !== -1;
    callback(null, issafesitelisted);
  },
  credentials: true,
};
//cors에 옵션사용할경우
app.use(cors(corsOptions));

 

 

 

나를 정말 고생시킨 .. cors 

https와 함께 다시는 만나지 않길 빈다 ㅡ.ㅡ