다른 도메인간 쿠키 전송하기

백엔드와 프론트엔드가 보통 나누어져 있는 서버가 있습니다. 저같은 경우 localhost에서 두 가지의 서버를 모두 개발하고 있기 때문에 다른 포트로 연결된 이상 사실상 다른 도메인으로 인식하곤 합니다. 그렇기 때문에 CORS 세팅을 통해 서버에서도 모든 클라이언트에 접속이 가능하도록 설정을 하게 하였지만, 브라우저 간 쿠키전송은 되지 않으므로 난감한 경우가 있습니다. 

이러한 경우 Request / Response Header 를 설정해주어야 합니다. 먼저 프론트에서 axios 요청을 사용한다고 가정하여 전송을 해봅니다. axios 설치는 아래와 같이 해주시면 됩니다.

$ npm i axios

그리고 소스에서는 아래와 같이 사용합니다.

const axios = require('axios')

axios.post('http://localhost:8000/api/addr', [data], { withCredentials: true })

위에서의 withCredentials에 대한 설정은 MDN 공식 문서에도 올라와 있습니다.

https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/withCredentials

XMLHttpRequest.withCredentials - Web APIs | MDN

단, 위에서도 언급하였다시피 localhost 간에는 통신이 되지 않을 수 있으므로, WebPack dev server 등으로 Proxy Server를 띄워두어야하며, 로그인 시에는 쿠키 생성 / 로그아웃 시에는 쿠키가 삭제되도록 클라이언트 소스에서도 작업이 이루어져야 합니다.

const app = require('express')
const session = require('express-session')
const bodyParser = require('body-parser')
const FileStore = require('session-file-store')(session)

app.use(bodyParser.urlencoded({ extended: false }))

app.use(session({
   secret: 'appName',
   resave: false,
   saveUninitialized: true,
   store: new FileStore()
}))

// 로그인
app.post('http://localhost:8000/auth/login', 
      { email: this.state.id, password: this.state.password }, 
      { withCredentials: true, })
   .then((req, res) => {
      if(req.session.logined) {
         res.render('logout', { id : email })
      } else {
         res.render('login success')
      }
      console.log(res);
   })
   .catch(error => {
      console.error(error)
      document.location.href = "/login"
})

// 로그아웃
app.post('http://localhost:8000/auth/logout', (req, res) => {
   req.session.destory()
   res.redirect('/')
})