[node.js] NodeJS + React 연동해서 쿠키🍪 교환하기 (크롬)

---

 

현재 프론트는 React, 백은 Node.js를 이용해서 개발하고 있다.

각각 다른 포트를 사용하여 운영 중인데, 로그인 기능을 위해 두 서버간 쿠키를 전송해야 하는 일이 생겼다.

하지만 크로스도메인 문제 때문인지 서버에서 보낸 쿠키가 브라우저에서 나타나지 않았다.

 

1) CORS 등록

그래서 검색을 해보니 Node에서는 가장 main app(여기서는 server.js)에 cors를 사용해줘야 한다고 한다!

// ...
const cors = require('cors');

// ...
app.use(cors({
    origin: true,  
    credentials: true, // 크로스 도메인 허용
    methods: ['POST', 'PUT', 'GET', 'OPTIONS', 'HEAD'],
}));

리액트 파일엔 다음과 같이 한줄을 추가해줬다.

axios.defaults.withCredentials = true;

그리고 로그인 로직에는 다음과 같이 쿠키를 사용했다.

res.cookie('accessToken', accessToken);

하지만 저렇게 보낼 경우 cookie의 옵션 중 하나인 sameSite의 값이 디폴트로 lax에 지정되는 문제가 발생한다. (크롬의 경우)

그래서 POST API를 사용할 수 없고 GET API만이 허용된다.

그래서 다음과 같이 변경했다.

res.cookie('refreshToken', refreshToken, {
            sameSite: "None",
        });

이렇게 전송하니 이번엔, sameSite를 None으로 지정하게 되면, secure 옵션을 true로 지정해줘야 한다고 한다. 

secure 옵션에 true를 주게되면 http가 아닌 https로 바꾸어 전송해야 한다...

 

2) 인증서 발급

http에서 https로 바꾸려면 SSL 인증서를 발급받아야 한다. 처음엔 lentsencrypt로 발급받으려고 했으나, 로컬호스트는 발급이 안된다는 글을 발견했다...! 때문에 openssl을 통해 발급 받기로 했다!

OPENSSL을 통한 인증서 발급은 다음 글을 참고했다. 

https://www.lesstif.com/system-admin/openssl-root-ca-ssl-6979614.html

OpenSSL 로 ROOT CA 생성 및 SSL 인증서 발급

그리고 다시 server.js로 돌아와 다음 정보를 같이 추가했다. (키와 인증서들은 서버와 같은 경로에 두었다)

// ...
const express = require('express');
const fs = require('fs')

// ...
// Https로 연결하기 위한 옵션
const options = {
  key: fs.readFileSync('./lesstif.com.key'), // 키
  cert: fs.readFileSync('./lesstif.com.crt'), // 인증서
  ca: fs.readFileSync('./lesstif-rootca.crt') // ca 인증서
}

https.createServer(options, app).listen(port, function() {
    console.log("HTTPS server listening on port " + port);
  });

그리고 로그인 로직 쿠키 정보는 다음과 같이 수정했다.

res.cookie('accessToken', accessToken, {
            httpOnly: false,
            sameSite: "None",
            secure: true,
        });

그리고 React의 프록시는 기존의 http에서 https로 모두 수정!

이렇게 수정한 후 React를 통해 로그인 API를 호출하니....

"NET::ERR_CERT_AUTHORITY_INVALID" 와 같은 에러가 뜨면서 로그인이 안되는 문제가 발생했다 ㅜㅜ 

 

3) 인증서 등록

검색해보니 우분투 자체에 인증서를 등록해줘야 한다고 해서 위 서버에 등록한 키와 인증서들을 복사하여

/usr/share/ca-certificates/extra 경로로 이동시켜주었다. (extra 폴더는 생성) 

그 후 콘솔에 다음과 같이 입력한 후 인증서를 등록했다..!

dpkg-reconfigure ca-certificates

그리고 크롬에서도 해당 인증서를 등록해줘야 한다..!

chrome://settings/certificates로 이동해 발급받은 CA 인증서를 등록해줬다.

 

 

 

그리고 다시 로그인 API를 사용해보니 다음과 header에 쿠키 있는 걸 확인!

---